/******* setting.scss *******/
/******* mixin.scss *******/
@media screen and (max-width: 960px) {

  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  fildset,
  input,
  textarea,
  p,
  blockquote,
  table,
  th,
  td,
  address,
  div {
    font-size: 2.8vw;
    line-height: 180%;
  }

  /******header******/
  header .headCont {
    box-sizing: border-box;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5% 4%;
    width: 100%;
  }

  header .menu {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 200%;
    overflow: hidden;
    text-indent: 180%;
    white-space: nowrap;
    content: "";
    display: block;
    height: 0px;
    width: 0px;
    background-image: url(../img/common/headMenu.png);
    padding-top: 7.21vw;
    width: 12vw;
  }

  header .headLogo {
    position: relative;
    top: auto;
    left: auto;
    width: 44%;
  }

  header .headLogo a {
    background-image: url(../img/common/logo.png);
    height: 0;
    padding-top: 12.2%;
    width: 100%;
  }

  header .spMenuArea {
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    top: 17.2vw;
    left: 0;
    z-index: 100;
    transition: all .5s;
    width: 100%;
  }

  header .headLinkArea {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 3%;
    width: 92%;
  }

  header .headLinkArea ul {
    border-bottom: 1px solid #7d515b;
    margin-bottom: 3%;
    flex-wrap: wrap;
  }

  header .headLinkArea ul li {
    font-size: 90%;
    margin-bottom: 1.5vw;
    margin-right: 0;
    width: 50%;
  }

  header .headLinkArea ul li.spLink {
    display: block;
  }

  header .headLinkArea ul li:before {
    height: 0;
    padding-top: 5%;
    vertical-align: .05em;
    width: 3%;
  }

  header .headLinkArea .headCustomer {
    border-radius: 8px;
    background: #602430;
    font-size: 90%;
    margin: 0 auto 3%;
    padding: 0;
    text-align: center;
  }

  header .headLinkArea .headCustomer a {
    color: #fff;
    display: block;
    padding: 3.5% 0;
  }

  header .headLinkArea .headCustomer a:before {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    text-indent: 180%;
    white-space: nowrap;
    content: "";
    display: block;
    height: 0px;
    width: 0px;
    background-image: url(../img/common/headIcon2.png);
    display: inline-block;
    margin-right: 2%;
    padding-top: 5.3%;
    vertical-align: -.5em;
    width: 5.8%;
  }

  header .headLinkArea .headFb {
    margin: 0 auto;
    text-align: center;
  }

  header .headLinkArea .headFb img {
    vertical-align: -.8em;
    margin-right: 2%;
    width: 6.5%;
  }

  header .headLinkArea .headFb span {
    display: inline-block;
    color: #000;
    font-size: 90%;
    font-weight: bold;
  }

  header nav {
    position: relative;
    top: auto;
    right: auto;
  }

  header nav ul {
    background-color: #f4efda;
    border-top: 1px solid #7d515b;
    flex-wrap: wrap;
    margin-bottom: 3%;
  }

  header nav ul li {
    border: none;
    border-bottom: 1px solid #7d515b !important;
    box-sizing: border-box;
    width: 50%;
  }

  header nav ul li:nth-child(2n-1) {
    border-right: 1px solid #7d515b;
  }

  header nav ul li a {
    height: auto;
    padding: 6% 3%;
  }

  header nav ul li a:before {
    margin-bottom: 2px;
  }

  header.view .menu {
    background-position: 100% 0;
  }

  header.view .spMenuArea {
    max-height: 120vw;
  }

  /******footer******/
  footer {
    border-top: 1px solid #e5e5e5;
    padding: 0 0 5%;
  }

  footer .footNavArea {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  footer .footNavArea .cateTop {
    display: block;
  }

  footer .footNavArea .cateTop a {
    border-bottom: 1px solid #e5e5e5;
    color: #000;
    font-weight: bold;
    display: block;
    padding: 2.5vw 0 2.5vw 4vw;
  }

  footer .footNavArea li {
    border-bottom: 1px solid #e5e5e5;
    font-size: 85%;
    margin-bottom: 0;
  }

  footer .footNavArea li:before {
    display: none !important;
  }

  footer .footNavArea li a {
    color: #000 !important;
    display: block;
    padding: 2.5vw 4vw !important;
    text-decoration: underline;
  }

  footer .footNavArea li a:after {
    display: none !important;
  }

  footer .footNavArea dl dt {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    margin: 0 !important;
  }

  footer .footNavArea dl dt:before {
    display: none !important;
  }

  footer .footNavArea dl dt a {
    box-sizing: border-box;
    color: #000 !important;
    display: block;
    padding: 2.5vw 0 2.5vw 4vw !important;
    text-decoration: underline;
    width: 85%;
  }

  footer .footNavArea dl dt a:after {
    display: none;
  }

  footer .footNavArea dl dt span {
    display: block;
    text-align: center;
    position: relative;
    width: 15%;
  }

  footer .footNavArea dl dt span:before {
    background-color: #5f2430;
    content: "";
    height: 2px;
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 16px;
  }

  footer .footNavArea dl dt span:after {
    background-color: #5f2430;
    content: "";
    height: 16px;
    display: block;
    margin: -7px auto 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 2px;
  }

  footer .footNavArea dl>dd {
    max-height: 0;
    overflow: hidden;
    transition: all .3s;
  }

  footer .footNavArea dl.c>dt {
    background-color: #d0c9ae;
  }

  footer .footNavArea dl.c>dt span:after {
    display: none;
  }

  footer .footNavArea dl.c>dd {
    max-height: 50vw;
  }

  footer .footNavArea dl.c>dd.subNav01,
  footer .footNavArea dl.c>dd.subNav02 {
    max-height: 110vw;
  }

  footer .footNavArea .footNav01 {
    display: block;
    padding-left: 0;
    width: 100%;
  }

  footer .footNavArea .footNav01 dl {
    display: block;
  }

  footer .footNavArea .footNav01 dl dt {
    font-size: 85%;
    margin-left: 0;
    width: 100%;
  }

  footer .footNavArea .footNav01 dl dt:before {
    display: none;
  }

  footer .footNavArea .footNav01 dl dt a {
    padding-left: 6vw !important;
  }

  footer .footNavArea .footNav01 dl .cateTop a {
    font-size: 85%;
    padding-left: 6vw !important;
  }

  footer .footNavArea .footNav01 dl dd {
    margin-right: 0;
  }

  footer .footNavArea .footNav01 dl dd li a {
    padding-left: 8vw !important;
  }

  footer .footNavArea .footNav01 .subNav01 {
    width: 100%;
  }

  footer .footNavArea .footNav01 .subNav02 {
    border: none;
    padding: 0;
    width: 100%;
  }

  footer .footNavArea .footNav02 {
    border: none;
    padding: 0;
    width: 100%;
  }

  footer .footNavArea .footNav02 dl {
    padding-left: 0;
  }

  footer .footNavArea .footNav02 dl dt {
    margin: 0;
  }

  footer .footNavArea .footNav02 dl li a {
    padding-left: 6vw !important;
  }

  footer .footNavArea .footNav02>li {
    margin-bottom: 0;
  }

  footer .footNavArea .footNav02>li:first-child {
    border-bottom: none;
  }

  footer .footNavArea .footNav02>li:first-child:before {
    display: none;
  }

  footer .footNavArea .footNav03 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    width: 100%;
  }

  footer .footNavArea .footNav03 li {
    box-sizing: border-box;
    width: 50%;
  }

  footer .footNavArea .footNav03 li:nth-child(2n-1) {
    border-right: 1px solid #e5e5e5;
  }

  footer .footContArea {
    border: none;
    padding-top: 6%;
  }

  footer .footCont {
    display: block;
    width: 100%;
  }

  footer .footCont .footLink {
    border-bottom: 1px solid #eee;
    padding: 0 4% 4%;
    position: relative;
  }

  footer .footCont .footLink li {
    background: url(../img/common/arrow5.png) no-repeat 0 35%;
    background-size: 1.5%;
    display: block;
    margin: 0 0 2%;
    padding-left: 3%;
  }

  footer .footCont .logoArea {
    margin: 0 auto 5%;
    padding-top: 6%;
    text-align: center;
  }

  footer .footCont .logoArea dt {
    margin-bottom: 3%;
    display: inline-block;
    width: 55%;
  }

  footer .footCont .logoArea dd span {
    display: block;
  }

  footer .footCont .copy {
    text-align: center;
  }

  .pageTop {
    background-size: 100%;
    font-size: 85%;
    font-weight: bold;
    height: 20vw;
    line-height: 120%;
    padding: 3.8vw 5.8vw 0 0;
    text-align: center;
    width: 20vw;
    right: 3vw;
    bottom: 12vw;
  }

  .pageTop.abs {
    position: fixed;
  }

  /******contents******/
  .contents {
    padding-bottom: 5%;
  }

  .contents .secCont {
    width: 92%;
  }

  .contents .otherArea {
    margin-bottom: -5%;
  }

  .contents .titleArea {
    background-size: auto 100%;
    height: 25vw;
  }

  .contents .titleArea:before {
    display: none;
  }

  .contents .titleArea ol {
    background-color: rgba(227, 222, 199, .95);
    box-sizing: border-box;
    margin: 0 auto 4%;
    padding: 1vw 4%;
    position: relative;
    width: 100%;
  }

  .contents .titleArea ol li {
    background-position: 0 50%;
    background-size: 1vw;
    margin-left: 1.5%;
    padding-left: 2%;
  }

  .contents .titleArea h1 {
    font-size: 140%;
    padding-left: 6%;
    width: 100%;
  }

  .contents>section {
    margin-top: 10%;
  }

  .contents .secTitle {
    margin-bottom: 5%;
  }

  .contents .secTitle h2 {
    font-size: 140%;
    width: 92%;
  }

  .contents .secTitle h2 span {
    padding-bottom: 1%;
  }

  .contents .secTitle h2 span span {
    display: block;
    line-height: 120%;
  }

  .contents h3 {
    border-left: 2px solid #602430;
    margin-bottom: 4%;
    padding-left: 2%;
  }

  .contents p {
    margin-bottom: 4%;
  }

  .contents .cateNav li a {
    padding: 3vw;
  }

  /*********index*********/
  #index .mainVisual {
    margin: 0 auto 15%;
  }

  #index .mainVisual .mvImage {
    display: none;
    height: auto;
    overflow: visible;
  }

  #index .mainVisual .mvImage.sp {
    display: block;
  }

  #index .mainVisual h1 {
    top: 30%;
    left: 0;
    right: 0;
    margin: auto;
    width: 43.5%;
  }

  #index .mainVisual .mvFig01 {
    background-image: url(../img/index/mvPict01_sp.png);
    height: 0;
    padding-top: 34%;
    margin: auto;
    top: 2%;
    left: 0;
    right: 0;
    width: 56%;
  }

  #index .mainVisual .mvFig02 {
    background-image: url(../img/index/mvPict02_sp.png);
    height: 0;
    padding-top: 54%;
    margin: auto;
    bottom: -2%;
    right: 2%;
    width: 36.6%;
  }

  #index .mainVisual .slick-dots {
    bottom: -7%;
  }

  #index .h201 h2 {
    margin: 0 auto 8%;
    width: 92%;
  }

  #index .h201 h2:after {
    height: 30vw;
    width: 20vw;
    bottom: -9vw;
    right: -4vw;
  }

  #index .h201 .secCont {
    display: block;
    width: 92%;
  }

  #index .h201 h3 {
    border-bottom: 2px solid #602430;
    margin: 0 auto 8%;
  }

  #index .h201 h3 span {
    padding: .5em 0;
  }

  #index .h201 .h301 {
    text-align: center;
  }

  #index .h201 .h302 {
    margin: 0 auto 12%;
  }

  #index .h201 .h302 .pict {
    box-sizing: border-box;
    margin-bottom: 8%;
    position: relative;
    padding: 0 0 2vw 2vw;
    width: 100%;
  }

  #index .h201 .h302 .pict:after {
    border-radius: 15px;
    height: 58vw;
    top: auto;
    bottom: 0;
    left: 0;
    width: 95%;
  }

  #index .h201 .h302 .detailArea {
    margin-bottom: 7%;
    padding: 8% 6% 6%;
    position: relative;
    width: 100%;
  }

  #index .h201 .h302 .detailArea:before {
    display: none;
  }

  #index .h201 .h302 .detailArea h4 {
    margin-bottom: 3%;
  }

  #index .h201 .h302 .detailArea p {
    margin-bottom: 4%;
  }

  #index .h201 .h302 .detailArea .recipe dt {
    margin-bottom: 1.5%;
  }

  #index .h201 .h302 .detailArea .recipe dt:before {
    height: 2.8vw;
    margin-right: 1.5%;
    vertical-align: -.1em;
    width: 2.8vw;
  }

  #index .h201 .h302 .use {
    height: 41vw;
    margin: auto;
    padding-top: 9px;
    position: relative;
    top: auto;
    left: auto;
    width: 41vw;
  }

  #index .h201 .h302 .use span {
    font-size: 90%;
  }

  #index .h201 .h302 .use span:before {
    height: 8vw;
    width: 5vw;
  }

  #index .h201 .h302 .use span:after {
    height: 8vw;
    width: 5vw;
  }

  #index .h201 .h302 .use img {
    margin: 0 auto;
    width: 53%;
  }

  #index .h201 .h303 {
    margin: -7vw auto 0;
    padding: 12vw 0 8vw;
    text-align: center;
  }

  #index .h201 .h303 h3 {
    font-size: 110%;
    height: auto;
    margin: 0 auto 4%;
    padding: 11.5% 0 8% 5%;
    width: 92%;
  }

  #index .h201 .h303 .btn {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
  }

  #index .h201 .recipeSlideArea .slideCont a .pict {
    border: 4px solid #fff;
    height: 40vw;
    width: 40vw;
  }

  #index .h202 {
    margin-bottom: 5%;
    padding-top: 12%;
  }

  #index .h202 .secCont {
    width: 92%;
  }

  #index .h203 {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 60% 0 0;
    width: 100%;
  }

  #index .h203 .secCont {
    border-radius: 0;
    padding: 7% 4% 12%;
    width: 100%;
  }

  #index .h203 .lead01 {
    background-size: 100%;
    font-size: 95%;
    padding: 20% 0 22%;
    top: -70%;
    left: 4%;
    width: 78%;
  }

  #index .h203 .lead02 {
    background: url(../img/index/h203bg2sp.png) no-repeat 50% 0;
    background-size: 70%;
    font-size: 95%;
    margin: 0 auto 5%;
    padding: 3% 0 5%;
    position: relative;
    top: auto;
    left: auto;
    text-align: center;
    width: 100%;
  }

  #index .h203 .btn {
    bottom: -5%;
  }

  #index .h203 .historySlideArea {
    width: 100%;
  }

  #index .h203 .historySlideArea .historySlide dl {
    /*
    background-position: 50% 61%;
    background-size: 100%;
    */
    width: 100%;
  }

  #index .h203 .historySlideArea .historySlide dl dt {
    font-size: 320%;
    padding: 0 5%;
  }

  #index .h203 .historySlideArea .historySlide dl dd {
    font-size: 120%;
    font-weight: bold;
    margin: 10% auto 0;
    line-height: 130%;
  }

  #index .h203 .historySlideArea .historySlide dl dd.pict {
    border: 4px solid #fff;
    box-sizing: border-box;
    margin-top: 5%;
    width: 100%;
  }

  #index .h203 .historySlideArea .historySlide dl dd.pict img {
    width: 100%;
  }

  #index .h203 .historySlideArea .prev {
    top: 58vw;
    left: 0;
    z-index: 20;
  }

  #index .h203 .historySlideArea .next {
    top: 58vw;
    right: 0;
    z-index: 20;
  }

  #index .h203 .slick-dots {
    top: 58vw;
  }

  #index .h204 {
    margin-bottom: 10%;
    padding-top: 15%;
    position: relative;
  }

  #index .h204 h2 {
    margin: 0 auto 2%;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    text-align: center;
    width: 42%;
    z-index: 3;
  }

  #index .h204 h2 span {
    height: 42vw;
    padding-top: 35%;
    text-align: center;
    width: 42vw;
  }

  #index .h204 p {
    height: auto;
    margin: 0 auto;
    padding-top: 10%;
    padding-bottom: 13%;
    bottom: 34%;
    left: 0;
    right: 0;
    width: 75%;
    z-index: 2;
  }

  #index .h204 .btn {
    margin-top: 5%;
  }

  #index .h205 {
    margin-bottom: 6%;
  }

  #index .h205 h2 {
    margin-bottom: 3%;
  }

  #index .h205 .secCont {
    display: block;
    width: 92%;
  }

  #index .h205 .newsArea {
    width: 100%;
  }

  #index .h205 .newsArea .all {
    font-size: 100%;
    margin: 0 auto 8%;
    text-align: center;
  }

  #index .h205 .newsArea .all a {
    background-color: #d0c9ae;
    color: #000;
    display: block;
    padding: 4% 0;
    text-decoration: none;
  }

  #index .h205 .newsArea .all a:before {
    vertical-align: .05em;
    height: 2.2vw;
    width: 1.5vw;
  }

  #index .h205 .fbArea {
    width: 100%;
  }

  #index .h206 {
    margin-bottom: 6%;
  }

  #index .h206 .secCont {
    width: 92%;
  }

  #index .h206 h2 {
    margin-bottom: 6%;
  }

  #index .h206 .banner {
    margin-bottom: 5%;
  }

  #index .h206 .banner li {
    margin-bottom: 1vw;
    width: 49.5%;
  }

  #index .h206 .banner li a {
    padding: 46% 0 4%;
  }

  #index .h206 .banner li:nth-child(1),
  #index .h206 .banner li:nth-child(2) {
    width: 100%;
  }

  #index .h206 .banner li:nth-child(1) a,
  #index .h206 .banner li:nth-child(2) a {
    padding: 13% 10%;
  }

  #index .h206 .link li {
    margin-bottom: 3vw;
    width: 100%;
  }

  #index .h206 .link li a {
    display: block;
    text-decoration: none;
  }

  #index .h206 .link li dl dt {
    padding: 13% 0;
  }

  #index .h206 .link li dl dd {
    padding: 6% 6% 7%;
  }

  #index .h206 .link li dl dd.more {
    background-color: #d0c9ae;
    color: #000;
    display: block;
    padding: 4% 0;
    text-align: center;
    text-decoration: none;
  }

  #index .h206 .link li dl dd.more:before {
    vertical-align: .05em;
    height: 2.2vw;
    width: 1.5vw;
  }

  #index .h206 .btn {
    margin-bottom: 80px;
  }

  .canSlideArea {
    margin: 0 auto 8%;
    padding: 0 6%;
    width: 92%;
  }

  .canSlideArea .slideCont a img {
    height: 26vw;
  }

  .canSlideArea .prev {
    height: 9vw;
    top: 20%;
    left: -8%;
    width: 9vw;
  }

  .canSlideArea .next {
    height: 9vw;
    top: 20%;
    right: -8%;
    width: 9vw;
  }

  ul.productList {
    margin-bottom: 8%;
  }

  ul.productList li {
    margin: 0 0 2vw;
    width: 49%;
  }

  ul.productList li .productImage {
    bottom: -5%;
    left: 3%;
    width: 38%;
  }

  .cateLink {
    margin-bottom: 5%;
    padding-left: 2.5vw;
  }

  .cateLink li {
    margin-right: 4vw;
    height: 4.75vw;
    margin-bottom: 1vw;
    padding: 1.3% 2vw 0 2vw;
  }

  .cateLink li:before {
    height: 4.75vw;
    left: -2.5vw;
    width: 3vw;
  }

  .newsTab {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3%;
  }

  .newsTab li {
    margin-bottom: 2vw;
    max-width: 49%;
    text-align: center;
    width: 49%;
  }

  .newsTab li a {
    padding: 4% 0;
  }

  .newsCont {
    margin-bottom: 4%;
  }

  .newsCont dl {
    display: block;
    padding: 4% 0;
  }

  .newsCont dl:first-of-type {
    border: none;
  }

  .newsCont dl dt {
    font-size: 90%;
    display: block;
    margin: 0 0 2%;
    width: 100%;
  }

  .newsCont dl dt span {
    line-height: 100%;
    margin-left: 2%;
    padding: 1.5% 3% 1%;
  }

  .newsCont.topnews dl dd {
    width: auto;
  }

  /*********products*********/
  #products .titleArea {
    background-position: 30% 0;
  }

  #products .productList2 {
    justify-content: space-between;
  }

  #products .productList2 li {
    margin: 0 0 2vw;
    padding: 2.5vw 2.5vw 12vw;
    width: 49%;
  }

  #products .productList2 li .pict {
    margin: 0 auto 4%;
  }

  #products .productList2 li .pict img {
    height: 20vw;
    width: auto;
  }

  #products .productList2 li dl {
    margin-bottom: 5%;
  }

  #products .productList2 li dl dt {
    min-height: 3.5em;
    margin-bottom: 2%;
  }

  #products .productList2 li dl dd {
    margin-bottom: 2%;
  }

  #products .productList2 li dl dd span {
    margin-right: 2%;
    text-align: center;
    width: 50%;
  }

  #products .productList2 li .btn {
    margin: 0 2.5vw;
    bottom: 2.5vw;
  }

  #products .productList2 li .btn a {
    padding: 4% 0;
  }

  #products .productList2 li .btn a:before {
    height: 3.3vw;
    vertical-align: .05em;
    width: 4.4vw;
  }

  #products .productCont {
    display: block;
    margin-bottom: 10%;
  }

  #products .productCont .pictArea {
    margin-bottom: 10%;
    padding: 5%;
    width: 100%;
  }

  #products .productCont .pictArea .pictSlide {
    margin: 0 auto 5%;
  }

  #products .productCont .pictArea .pictSlide .slick-slide img {
    max-width: 100%;
    width: 55%;
  }

  #products .productCont .pictArea .pictSlide .next,
  #products .productCont .pictArea .pictSlide .prev {
    margin-top: -4.5vw;
    height: 9vw;
    width: 9vw;
  }

  #products .productCont .pictArea .pict {
    margin: 0 auto 5%;
  }

  #products .productCont .pictArea .pict img {
    max-width: 100%;
    width: 55%;
  }

  #products .productCont .pictArea p {
    margin-bottom: 3%;
  }

  #products .productCont section {
    width: 100%;
  }

  #products .productCont section ul {
    margin-bottom: 40px;
  }

  #products .productCont section ul li {
    box-sizing: border-box;
    margin-bottom: 2vw;
    padding-left: 27vw;
    position: relative;
  }

  #products .productCont section ul li span {
    width: 25vw;
    min-width: 25vw;
  }

  #products .productCont section ul.nutritional li {
    width: 47%;
  }

  #products .allergy {
    margin-bottom: 7%;
  }

  #products .allergy li {
    background-position: 50% 4vw;
    background-size: auto 45%;
    box-sizing: border-box;
    font-size: 85%;
    margin: 0 1vw 1vw 0 !important;
    padding: 17vw 0 2vw;
    text-align: center;
    width: 23.5%;
  }

  #products .allergy li:nth-child(4n) {
    margin-right: 0 !important;
  }

  #products .allergyNote {
    margin-bottom: 10%;
    padding: 3%;
  }

  #products .otherArea {
    margin-top: 10%;
    padding-top: 5%;
  }

  #products .otherArea .canSlideArea {
    margin-bottom: 5%;
  }

  #products .otherArea .otherLink {
    background-color: #cbc6af;
    text-align: center;
  }

  #products .otherArea .otherLink a {
    padding: 3% 0;
  }

  #products .otherArea .otherLink a:after {
    margin-left: 2%;
    height: 2.2vw;
    vertical-align: middle;
    width: 1.5vw;
  }

  #products .stepArea {
    margin-bottom: 10%;
  }

  #products .stepArea dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 4.5vw;
    padding: 3vw;
    position: relative;
    width: 100%;
  }

  #products .stepArea dl:after {
    bottom: -3vw;
    height: 3vw;
    width: 5vw;
  }

  #products .stepArea dl:last-of-type:after {
    display: none;
  }

  #products .stepArea dl dt {
    border: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: block;
    margin-bottom: 3vw;
    padding: 2.5vw 0;
    width: 100%;
  }

  #products .stepArea dl dt span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }

  #products .stepArea dl dd {
    display: block;
    width: 65%;
  }

  #products .stepArea dl dd.pict {
    padding: 0;
    width: 30%;
  }

  /*********recipe*********/
  #recipe .titleArea {
    background-position: 14% 0;
  }

  #recipe .month {
    display: block;
  }

  #recipe .narrow {
    display: block;
    margin: 0 auto 6%;
  }

  #recipe .narrow dt {
    border-radius: 12px 12px 0 0;
    padding: 2vw 0;
    width: 100%;
  }

  #recipe .narrow dd {
    border-radius: 0 0 12px 12px;
    padding: 4vw 5%;
    width: 100%;
  }

  #recipe .narrow dd:before {
    margin-top: 0;
    margin-left: -1.5vw;
    top: -1vw;
    left: 50%;
    transform: rotate(90deg);
    height: 3.5vw;
    width: 2.8vw;
  }

  #recipe .otherArea {
    margin-top: 12%;
  }

  #recipe .otherArea .otherCateLink {
    padding: 2vw 0;
    width: 92%;
  }

  #recipe .otherArea .otherCateLink dt {
    color: #602430;
    font-weight: bold;
    margin-left: 0;
    width: 100%;
  }

  #recipe .otherArea .otherCateLink dd:after {
    margin: 0 1.2vw;
  }

  #recipe .recipeCont {
    display: block;
    margin-bottom: 10%;
  }

  #recipe .recipeCont .pictArea {
    margin-bottom: 8%;
    width: 100%;
  }

  #recipe .recipeCont .pictArea .pict {
    margin-bottom: 3%;
  }

  #recipe .recipeCont .pictArea .cateLink {
    margin-bottom: 3%;
  }

  #recipe .recipeCont .pictArea .useArea {
    padding: 4vw;
  }

  #recipe .recipeCont .pictArea .useArea .usePict {
    height: 30vw;
    width: 35%;
  }

  #recipe .recipeCont .pictArea .useArea dl {
    position: relative;
    width: 60%;
  }

  #recipe .recipeCont .pictArea .useArea dl dt {
    font-size: 85%;
    margin-top: -2vw;
    margin-bottom: 3%;
  }

  #recipe .recipeCont .pictArea .useArea dl dt:before {
    height: 8vw;
    width: 5vw;
  }

  #recipe .recipeCont .pictArea .useArea dl dt:after {
    height: 8vw;
    width: 5vw;
  }

  #recipe .recipeCont .pictArea .useArea dl dd {
    color: #000;
  }

  #recipe .recipeCont .pictArea .useArea dl dd.useLink {
    margin-top: 5%;
    position: relative;
    bottom: auto;
  }

  #recipe .recipeCont .pictArea .useArea dl dd.useLink a {
    background-size: 2vw;
    padding: 3% 0;
  }

  #recipe .recipeCont .detailArea {
    width: 100%;
  }

  #recipe .recipeCont .detailArea ul li {
    background-size: 4vw;
    background-position: 0 0;
    background-repeat: no-repeat;
    color: #602430;
    font-size: 90%;
    margin: 0 4vw 2vw 0;
    padding: 0 0 0 6vw;
  }

  #recipe .recipeCont .detailArea dl {
    margin-top: 5%;
  }

  #recipe .recipeCont .detailArea dl dt {
    margin-bottom: 2%;
  }

  #recipe .recipeCont .detailArea dl dt:before {
    height: 8px;
    width: 8px;
  }

  #recipe .recipeCont .detailArea dl.howto dd {
    min-height: 0;
    padding: 2vw 0;
  }

  #recipe .recipeCont .detailArea dl.howto dd:before {
    font-size: 130%;
    min-width: 10vw;
    margin-right: 3%;
  }

  #recipe .recipeAuthor {
    margin-bottom: 8%;
    padding: 4vw;
  }

  #recipe .recipeAuthor .authorPict {
    margin-right: 3%;
    width: 25%;
  }

  #recipe .recipeAuthor dl {
    width: 72%;
  }

  #recipe .recipeAuthor dl dt {
    margin-bottom: 2%;
  }

  .recipeList {
    margin-bottom: 5%;
  }

  .recipeList li {
    margin: 0 3vw 3vw 0 !important;
    width: 31%;
  }

  .recipeList li:nth-child(3n) {
    margin-right: 0 !important;
  }

  .recipeList li .pict {
    margin-bottom: 4%;
  }

  .recipeList li dl dt {
    line-height: 130%;
  }

  .recipeList li dl dd {
    font-size: 65%;
    margin-left: 1.2vw;
    height: 3.75vw;
    line-height: 120%;
    margin-bottom: .2vw;
    padding: .8vw 1vw 0 .8vw;
  }

  .recipeList li dl dd:before {
    height: 3.75vw;
    left: -1.9vw;
    width: 1.9vw;
  }

  .pager {
    margin-bottom: 6%;
  }

  .pager li a {
    margin: 0 1vw;
    height: 7vw;
    width: 7vw;
  }

  .pager li.next {
    margin: 0 0 0 1.5vw;
  }

  .pager li.next a {
    height: 2.3vw;
    width: 1.5vw;
  }

  .pager li.prev {
    margin: 0 1.5vw 0 0;
  }

  .pager li.prev a {
    height: 2.3vw;
    width: 1.5vw;
  }

  .pager li.end {
    margin: 0 0 0 1vw;
  }

  .pager li.end a {
    height: 2.3vw;
    width: 2.5vw;
  }

  .pager li.first {
    margin: 0 1vw 0 0;
  }

  .pager li.first a {
    height: 2.3vw;
    width: 2.5vw;
  }

  /*********csr*********/
  #csr .lead {
    margin-bottom: 10%;
  }

  #csr ul.csrLink {
    margin-bottom: 10%;
  }

  #csr ul.csrLink li {
    margin: 0 auto 5vw;
    width: 100%;
  }

  /*********vision*********/
  #vision .message .secCont {
    display: block;
  }

  #vision .message .secCont section {
    width: 100%;
  }

  #vision .message .secCont section p {
    margin-bottom: 4%;
  }

  #vision .message .secCont section p.author {
    margin-bottom: 8%;
    padding-top: 3%;
  }

  /*********policy*********/
  #policy p.note {
    padding: 4%;
  }

  #policy section ol {
    margin-bottom: 4%;
  }

  /*********report*********/
  #report p {
    margin-bottom: 2%;
  }

  #report .reportLink {
    display: block;
    margin: 10% auto 0;
    width: 92%;
  }

  #report .reportLink li {
    margin: 4% 0 0;
    width: 100%;
  }

  #report .reportLink li:first-child {
    margin-top: 0;
  }

  #report .reportLink li a {
    border-radius: 40px;
    font-size: 90%;
    padding: 3.2% 3vw 3.2% 8vw;
  }

  #report .reportLink li a:before {
    height: 4vw;
    margin-top: -2vw;
    top: 50%;
    left: 2vw;
    width: 4vw;
  }

  #report .reportLink li a:after {
    height: 4.2vw;
    margin-left: 4px;
    width: 3.5vw;
  }

  #report .reportLink li a[target="_blank"]:after {
    height: 1.7vw;
    width: 2vw;
  }

  #report .reportPict {
    display: block;
    margin-bottom: 10%;
  }

  #report .reportPict li {
    margin: 4% 0 0;
    width: 100%;
  }

  #report .reportPict li:first-child {
    margin-top: 0;
  }

  /*********utility*********/
  #utility p.lead {
    margin: 10% auto 0;
    width: 92%;
  }

  #utility p.link {
    margin-top: -3.5%;
  }

  #utility p.link a {
    background-position: 0 40%;
    background-size: 4%;
    padding-left: 4%;
  }

  #utility section ol {
    margin-top: -3.5%;
    margin-bottom: 4%;
  }

  /*********company*********/
  #company .langLink {
    margin: 10% auto 8%;
    width: 92%;
  }

  #company .langLink li {
    background-size: 1.3vw;
    background-position: 0 48%;
    font-size: 100%;
    padding-left: 2vw;
  }

  #company .langLink li:last-child {
    margin-left: 4%;
  }

  #company section {
    width: 92%;
  }

  #company section h2 {
    padding: 5% 10% 5% 9.5vw;
  }

  #company section h2:before {
    height: 3.5vw;
    margin-top: -1.75vw;
    top: 50%;
    left: 4vw;
    width: 3.5vw;
  }

  #company section .secCont {
    padding: 0 4vw;
    width: 100%;
  }

  #company section.c h2:after {
    left: 4.2vw;
    bottom: -1.7vw;
    height: 1.7vw;
    width: 2.8vw;
  }

  #company section.c .secCont {
    max-height: 1000vw !important;
    padding-top: 4vw;
    padding-bottom: 4vw;
  }

  #company h3 {
    margin-bottom: 4%;
  }

  #company h4 {
    color: #5f2430;
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 15px;
  }

  #company h4:before {
    background-color: #602430;
    border-radius: 50%;
    content: "";
    height: 8px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: .05em;
    width: 8px;
  }

  #company p {
    margin-bottom: 3%;
  }

  #company .pictArea {
    display: block;
  }

  #company .pictArea .pict {
    margin: 5% auto 0;
    text-align: center;
  }

  #company .pictArea .pict img {
    width: 100%;
  }

  #company .pictArea ul.pict {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  #company .pictArea ul.pict li {
    text-align: left;
    width: 48%;
  }

  #company .pictArea ul.pict li:first-child {
    margin-right: 0;
  }

  #company .pictList {
    display: flex;
    flex-wrap: wrap;
  }

  #company .pictList li {
    font-size: 85%;
    margin: 0 3% 3% 0 !important;
    width: 48.5%;
  }

  #company .pictList li:nth-child(2n) {
    margin-right: 0 !important;
  }

  #company table th {
    display: block;
    border-right: none;
    font-weight: bold;
    padding: 3% 0 0 !important;
    width: 100%;
  }

  #company table td {
    display: block;
    padding: 1.5% 0 3% !important;
  }

  #company #profile_japanese-goaisatsu .pict {
    width: 50%;
  }

  #company #rinen .pictArea {
    margin-bottom: 10%;
  }

  #company #rinen .pictArea .pict {
    width: 50%;
  }

  #company #rinen .lead {
    margin-bottom: 7%;
  }

  #company #rinen .lead img {
    width: 100%;
  }

  #company #rinen li {
    padding-left: 2em;
    text-indent: -2em;
  }

  #company #rinen .messageArea {
    display: block;
  }

  #company #rinen .messageArea section {
    width: 100%;
  }

  #company #rinen .messageArea section .logo {
    margin: 0 auto 5%;
  }

  #company #rinen .messageArea section .logo img {
    width: 50%;
  }

  #company #rinen .messageArea section:first-of-type {
    margin-bottom: 5%;
  }

  #company #rinen .messageArea section:first-of-type .logo img {
    width: 25%;
  }

  #company #rinen .messageArea section h4 {
    margin-bottom: 3%;
  }

  #company #gaiyo table th {
    border-bottom: none;
  }

  #company #gaiyo table th:before {
    display: none;
  }

  #company #gaiyo table th:after {
    display: none;
  }

  #company #gaiyo table td ul {
    display: block;
    width: 100%;
  }

  #company #gaiyo table td ul li:nth-child(2n) {
    margin-right: 0;
  }

  #company #gaiyo table td dl {
    display: block;
    margin-top: 3%;
  }

  #company #gaiyo table td dl:first-of-type {
    margin-top: 0;
  }

  #company #gaiyo table td dl dt {
    margin: 0;
    width: 100%;
  }

  #company #gaiyo table td dl dd {
    width: 100%;
  }

  #company #gaiyo table tr:first-of-type td {
    border-top: none;
  }

  #company #enkaku table td {
    padding-bottom: 0 !important;
  }

  #company #enkaku table tr:first-of-type td {
    border-top: none;
  }

  #company #enkaku table tr:last-of-type th {
    border-bottom: none;
  }

  #company #enkaku table tr:last-of-type td {
    padding-bottom: 3% !important;
  }

  #company #kyoten section {
    margin-bottom: 8%;
    padding-bottom: 8%;
    width: 100%;
  }

  #company #kyoten section h4 {
    margin-bottom: 2%;
  }

  #company #kyoten section .detailArea {
    width: 100%;
  }

  #company #kyoten section .detailArea p {
    padding-bottom: 5%;
  }

  #company #kyoten .overseas {
    margin-bottom: 8%;
  }

  #company #kyoten .overseas p {
    margin-bottom: 5%;
  }

  #company #kyoten .overseas ul {
    display: flex;
    justify-content: center;
  }

  #company #kyoten .overseas ul li {
    margin-right: 0;
  }

  #company #kyoten .overseas ul li:nth-child(2) {
    margin: 0 4%;
  }

  #company #kyoten .overseas ul li img {
    height: 25vw;
    width: auto;
  }

  #company #kyoten .pictList {
    margin-top: 5%;
  }

  #company #quality .pictArea {
    margin-bottom: 8%;
  }

  #company #quality .pictArea p {
    margin-bottom: 6%;
    width: 100%;
  }

  #company #quality .pictArea .pict {
    margin-left: 0;
  }

  #company #quality .about {
    margin-bottom: 3%;
  }

  #company #quality dl {
    margin-bottom: 8%;
    padding: 4%;
  }

  #company #quality dl:last-of-type {
    margin-bottom: 0;
  }

  #company #quality dl dt {
    margin-bottom: 3%;
  }

  #company #quality dl dd {
    margin-bottom: 3%;
  }

  #company #quality dl dd:last-of-type {
    margin-bottom: 0;
  }

  #company #kenkyu .pictList {
    margin: 4% auto 8%;
  }

  #company #kenkyu .info {
    padding: 0 4% 4%;
    width: 100%;
  }

  #company #kenkyu .info h3 {
    margin: 0 -4.5% 4%;
    padding: 3% 0;
  }

  #company #kenkyu .info .pictArea {
    margin-bottom: 6%;
  }

  #company #kenkyu .info .pictArea .pict {
    margin-left: auto;
    width: 70%;
  }

  #company #kenkyu .info .pictArea .detailArea h4 {
    margin-bottom: 3%;
  }

  #company #kenkyu .info .pictArea .detailArea p {
    margin-bottom: 3%;
  }

  #company #kenkyu .info .pictArea .detailArea dl {
    border-top: 1px solid #e3dec7;
    border-bottom: 1px solid #e3dec7;
    display: block;
    padding: 1% 0 2%;
  }

  #company #kenkyu .info .pictArea .detailArea dl dt {
    margin: 0 auto 2%;
    width: 100%;
  }

  #company #kenkyu .info .infoDetail {
    margin-bottom: 6%;
    padding: 4%;
  }

  #company #kenkyu .info .infoDetail:last-of-type {
    margin-bottom: 0;
  }

  #company #kenkyu .info .infoDetail .detailArea {
    display: block;
    justify-content: space-between;
  }

  #company #kenkyu .info .infoDetail .detailArea ul {
    margin-bottom: 4%;
    width: 100%;
  }

  #company #kenkyu .info .infoDetail .detailArea ul li {
    background-position: 0 2.2vw;
    background-size: 2vw;
    margin-bottom: 2%;
    padding-left: 3vw;
  }

  #company #kenkyu .info .infoDetail .detailArea ul li:last-child {
    margin-bottom: 0;
  }

  #company #kenkyu .info .infoDetail .detailArea .link {
    width: 100%;
  }

  #company #kenkyu .info .infoDetail .detailArea .link a {
    padding: 4% 0;
  }

  #company #kenkyu .info .infoDetail .detailArea .link a:after {
    vertical-align: -.05em;
    height: 2.5vw;
    width: 1.8vw;
  }

  #company #kenkyu.c .secCont {
    max-height: 1500px;
  }

  #company #kanren section {
    margin-bottom: 5%;
    padding-bottom: 5%;
  }

  #company #kanren section:last-of-type {
    margin-bottom: 0;
  }

  #company #kanren section h4 {
    margin-bottom: 2%;
  }

  #company #kanren section p {
    margin-bottom: 0;
  }

  #company #kanren section .pictArea p {
    width: 100%;
  }

  /*********kenkyu2*********/
  #kenkyu2 h4 {
    margin-bottom: 3%;
  }

  #kenkyu2 h4:before {
    height: 8px;
    width: 8px;
  }

  #kenkyu2 p {
    margin-bottom: 3%;
  }

  #kenkyu2 p.resultSummary {
    margin-bottom: 5%;
    padding: 3%;
  }

  #kenkyu2 .resultArea {
    display: block;
    margin-bottom: 10%;
    padding-top: 3%;
  }

  #kenkyu2 .resultArea h5 {
    margin-bottom: 2%;
  }

  #kenkyu2 .resultArea .detailArea {
    margin-bottom: 4%;
    width: 100%;
  }

  #kenkyu2 .resultArea .detailArea p {
    padding: 3%;
  }

  #kenkyu2 .resultArea .detailArea p.resultNote {
    padding: 1% 0 0;
  }

  #kenkyu2 .resultArea .pict {
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }

  #kenkyu2 .resultArea .pict img {
    max-width: 60%;
  }

  /*********recruit*********/
  #recruit .titleArea {
    height: 75vw;
  }

  #recruit .titleArea h1 {
    padding: 8% 0 0;
  }

  #recruit .titleArea h1 img {
    margin: 5% auto 0;
    width: 80%;
  }

  #recruit section {
    margin-top: -10vw;
  }

  #recruit section .secCont {
    background-position: 100% -8vw;
    background-size: 100%;
    padding: 6%;
  }

  #recruit section .lead {
    width: 92%;
  }

  #recruit section .lead li {
    width: 33.33%;
  }

  #recruit section .lead li img {
    width: 100%;
  }

  #recruit section p {
    margin-bottom: 10%;
    width: 100%;
  }

  #recruit section table {
    margin-bottom: 10%;
  }

  #recruit section table th {
    border-bottom: none;
    border-right: none;
    display: block;
    font-weight: bold;
    padding: 3% 0 0;
    width: 100%;
  }

  #recruit section table th:before {
    display: none;
  }

  #recruit section table th:after {
    display: none;
  }

  #recruit section table td {
    display: block;
    padding: 1.5% 0 3%;
  }

  #recruit section table tr:first-of-type td {
    border-top: none;
  }

  #recruit section dl {
    text-align: center;
  }

  #recruit section dl dt {
    font-weight: bold;
  }

  #recruit section dl dd {
    margin: 3% auto 0;
  }

  #recruit section dl dd.link {
    width: 75%;
  }

  #recruit section dl dd.link img {
    width: 85%;
  }

  #recruit section dl dd.link a:after {
    height: 1.7vw;
    right: 0;
    top: 60%;
    margin-top: -.85vw;
    width: 2vw;
  }

  /*********gallary*********/
  #gallary .cmList {
    display: flex;
    flex-wrap: wrap;
  }

  #gallary .cmList li {
    margin: 0 4% 4vw 0;
    width: 48%;
  }

  #gallary .cmList li:nth-child(2n) {
    margin-right: 0;
  }

  #gallary .cmList li .pict {
    margin-bottom: 2vw;
  }

  #gallary .cmList li dl dt {
    margin-bottom: 1vw;
  }

  /*********news*********/
  #news .newsTab {
    margin-bottom: 5%;
  }

  #news .newsCont {
    margin-bottom: 10%;
  }

  #news .secTitle {
    margin-bottom: 3%;
  }

  #news .newsInfo {
    margin-bottom: 8%;
  }

  #news .newsInfo span {
    line-height: 100%;
    margin-right: 2%;
    padding: 1% 3% 1%;
  }

  #news .pict {
    margin: 0 auto 4%;
  }

  #news .pict img {
    width: 100%;
  }

  #news .newsData {
    margin-bottom: 4%;
    padding: 2% 0;
  }

  #news h3 {
    margin-top: 10%;
  }

  #news .back {
    margin: 10% auto 5%;
  }

  /*********toiawase*********/
  #toiawase p.lead {
    margin: 10% auto 0;
    text-align: left;
    width: 92%;
  }

  #toiawase p.compLead {
    margin-bottom: 10%;
  }

  #toiawase p.check {
    margin: 0 auto 6%;
  }

  #toiawase p.check label {
    padding-left: 5.2vw;
  }

  #toiawase p.check label:before {
    height: 3.7vw;
    top: -.4vw;
    width: 3.7vw;
  }

  #toiawase .faqArea dl dt {
    padding: 5% 9.5vw 5% 10.5vw;
  }

  #toiawase .faqArea dl dt:before {
    height: 5.5vw;
    top: 50%;
    margin-top: -2.75vw;
    left: 3vw;
    width: 5.5vw;
  }

  #toiawase .faqArea dl dt:after {
    height: 3.5vw;
    margin-top: -1.75vw;
    top: 50%;
    right: 4vw;
    width: 3.5vw;
  }

  #toiawase .faqArea dl dd {
    padding: 0 4vw;
  }

  #toiawase .faqArea dl dd p {
    margin-bottom: 3%;
  }

  #toiawase .faqArea dl.c dd {
    max-height: 200vw;
    padding-top: 5vw;
    padding-bottom: 4vw;
  }

  #toiawase .faqArea dl.c dd:before {
    left: 4.2vw;
    height: 1.7vw;
    width: 2.8vw;
  }

  #toiawase .faqLink {
    padding: 0;
  }

  #toiawase .faqLink a:after {
    height: 1.7vw;
    width: 2vw;
  }

  #toiawase .tel {
    display: block;
    text-align: center;
  }

  #toiawase .tel dt {
    margin: 0 auto 5%;
    padding: 2%;
  }

  #toiawase .tel dd {
    font-weight: bold;
    width: auto;
  }

  #toiawase .tel dd.telLink {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4%;
    padding: 0;
  }

  #toiawase .tel dd.telLink:before {
    margin-right: 3vw;
    height: 7.5vw;
    width: 8.5vw;
  }

  #toiawase .tel dd.telLink a {
    font-size: 260%;
    pointer-events: all;
  }

  #toiawase table {
    margin: 12% auto 4%;
  }

  #toiawase table th {
    border-bottom: none;
    border-right: none;
    display: block;
    padding: 3% 0 1.5%;
    width: 100%;
  }

  #toiawase table th:before {
    display: none;
  }

  #toiawase table th:after {
    display: none;
  }

  #toiawase table td {
    display: block;
    padding: 0 0 2.5%;
  }

  #toiawase table td input {
    height: 10vw;
    padding: 0 2vw;
    width: 100% !important;
  }

  #toiawase table td input.size03 {
    width: 30% !important;
  }

  #toiawase table td br+input {
    margin-top: 1.5%;
  }

  #toiawase table td span {
    display: block;
    margin: 1vw 0 0;
  }

  #toiawase table td span.zip {
    display: inline-block;
    margin: 0 2vw 0 0;
  }

  #toiawase table td a.zipLink {
    margin-left: 2vw;
    padding: 2% 4%;
  }

  #toiawase table td textarea {
    height: 40vw;
    padding: 1vw 2vw;
    width: 100%;
  }

  #toiawase table tr:first-of-type td {
    border-top: none;
  }

  #toiawase .btn {
    margin: 0 auto 8%;
  }

  #toiawase .btn.back a:after {
    left: 3vw;
  }

  #toiawase ul.btn {
    display: block;
  }

  #toiawase ul.btn li {
    margin: 0 auto;
    width: 55%;
  }

  #toiawase ul.btn li button {
    width: 100%;
  }

  #toiawase ul.btn li:first-child {
    margin-bottom: 3%;
  }

  #toiawase ul.btn li:first-child button:after {
    left: 3vw;
  }

  #toiawase .compTitle {
    margin-bottom: 5%;
  }

  /*********character*********/
  #character .contents {
    padding-bottom: 0;
  }

  #character section {
    padding: 10% 0 20%;
  }

  #character section h2 {
    margin: 0 auto 12%;
  }

  #character section h2 img {
    width: 80%;
  }

  #character .prev {
    height: 9vw;
    width: 9vw;
    margin-top: -4.5vw;
  }

  #character .prev:before {
    height: 3vw;
    margin-left: -1vw;
    width: 2vw;
  }

  #character .next {
    height: 9vw;
    width: 9vw;
    margin-top: -4.5vw;
  }

  #character .next:before {
    height: 3vw;
    margin-right: -1vw;
    width: 2vw;
  }

  #character .popupAreaWrap {
    top: 10vw;
  }

  #character .popupArea {
    margin: 0 auto;
    padding: 0 10vw;
    width: 100%;
  }

  #character .popupArea .slideCont {
    padding: 2vw;
  }

  #character .popupArea .slideCont section {
    padding: 3vw;
  }

  #character .popupArea .slideCont section .close {
    height: 6vw;
    top: -2vw;
    right: -2vw;
    width: 6vw;
  }

  #character .popupArea .slideCont section .close:before {
    height: 2vw;
    width: 2vw;
  }

  #character .popupArea .slideCont section h3 {
    margin-bottom: 3vw;
  }

  #character .popupArea .slideCont section h3 span {
    margin-right: 1.5vw;
    padding: 1.5vw 1.5vw 1.5vw 2.5vw;
  }

  #character .popupArea .slideCont section .pictArea {
    display: block;
  }

  #character .popupArea .slideCont section .pictArea .detailArea {
    width: 100%;
  }

  #character .popupArea .slideCont section .pictArea .detailArea p {
    margin-bottom: 5%;
  }

  #character .popupArea .slideCont section .pictArea .detailArea table th {
    border-bottom: none;
    border-right: none;
    display: block;
    font-weight: bold;
    padding: 2vw 0 0;
    width: 100%;
  }

  #character .popupArea .slideCont section .pictArea .detailArea table th:before {
    display: none;
  }

  #character .popupArea .slideCont section .pictArea .detailArea table th:after {
    display: none;
  }

  #character .popupArea .slideCont section .pictArea .detailArea table td {
    display: block;
    padding: 1vw 0 2vw;
  }

  #character .popupArea .slideCont section .pictArea .detailArea table tr:first-of-type td {
    border-top: none;
  }

  #character .popupArea .slideCont section .pictArea .pict {
    margin: 0 auto 2vw;
    width: 100%;
  }

  #character .popupArea .slideCont section .pictArea .pict img {
    height: 50vw;
    width: auto;
  }

  #character .popupArea .prev {
    left: 0;
  }

  #character .popupArea .next {
    right: 0;
  }

  #character .slideArea .slideCont {
    box-sizing: border-box;
    outline: none;
    padding: 5vw 0 0;
    width: 90vw;
  }

  #character .slideArea .slideCont span {
    margin: 5vw auto 0;
    padding: 1vw 6vw;
  }

  #character .slideArea .slideCont img {
    height: 60vw;
    margin: 0 auto;
    width: auto;
  }

  #character .slideArea .prev {
    left: 12vw;
    margin-left: 0;
  }

  #character .slideArea .next {
    right: 12vw;
    margin-right: 0;
  }

  /*********error*********/
  #error section {
    margin: 5% 0;
  }

  #error .secCont {
    padding: 5%;
    width: 92%;
  }

  #error h2 {
    font-size: 120%;
    display: block;
    margin: 0 auto 5%;
    padding: 1% 0;
  }

  #error h2:after {
    bottom: -2vw;
    height: 2vw;
    width: 3vw;
  }

  #error .pict {
    margin: 0 auto 5%;
  }

  #error .pict img {
    width: 30%;
  }

  #error p {
    color: #000;
    font-size: 95%;
    margin: 0 auto;
  }

  /*********history*********/
  #history .leadArea {
    background-size: cover;
  }

  #history .leadArea dl {
    padding: 4% 0;
    width: 92%;
  }

  #history .leadArea dl dt {
    margin-bottom: 3%;
  }

  #history .leadArea dl dt img {
    width: 65%;
  }

  #history .leadArea dl dd {
    font-size: 80%;
    width: 70%;
  }

  #history .anchor {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 10% auto 0;
    width: 92%;
  }

  #history .anchor li {
    margin-bottom: 2vw;
    width: 49%;
  }

  #history .anchor li:nth-child(2n) {
    margin-left: 2%;
  }

  #history #history02 .secCont dl:last-of-type,
  #history #history03 .secCont dl:last-of-type {
    min-height: 0;
  }

  #history .secCont dl {
    display: block;
    margin-left: 1vw;
    padding-bottom: 5vw;
  }

  #history .secCont dl.note {
    padding-top: 5vw;
    padding-bottom: 5vw;
  }

  #history .secCont dl dt {
    padding-left: 4vw;
    width: 100%;
  }

  #history .secCont dl dt:before {
    border-width: .5vw;
    height: 2vw;
    top: 2.5vw;
    left: -1.8vw;
    width: 2vw;
  }

  #history .secCont dl dt.first:before {
    height: 4vw;
    top: 0;
    left: -2.9vw;
    width: 4vw;
  }

  #history .secCont dl dd {
    box-sizing: border-box;
    padding: 0 0 0 4vw;
    width: 100%;
  }

  #history .secCont dl dd p {
    background-position: 3vw 3vw;
    background-size: 12vw;
    box-sizing: border-box;
    min-height: 0;
    margin: 3vw 0 0;
    padding: 3vw 3vw 3vw 18vw !important;
  }

  #history .secCont dl dd p.small {
    width: 100%;
  }

  #history .secCont .pict {
    margin-top: 3vw;
    margin-bottom: 1vw;
    position: relative;
    top: auto !important;
    right: auto !important;
  }

  #history .secCont .pict img {
    width: 60%;
  }

  #history .secCont .pict a:after {
    height: 1.7vw;
    width: 2vw;
  }

  #history .secCont .pict.pict06 img {
    width: 30%;
  }

  #history .secCont .pict.pict07 img,
  #history .secCont .pict.pict08 img {
    width: 45%;
  }

  #history .episodeArea {
    padding: 4% 0;
  }

  #history .episodeArea dl {
    min-height: 0;
    padding-left: 0;
    width: 92%;
  }

  #history .episodeArea dl dt {
    margin-bottom: 4%;
  }

  #history .episodeArea dl dd {
    color: #602430;
  }

  #history .episodeArea dl dd.pict {
    text-align: center;
    margin-top: 4%;
    position: relative;
    top: auto;
    left: auto;
  }

  #history .episodeArea dl dd.pict img {
    width: 40%;
  }
}

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

  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  fildset,
  input,
  textarea,
  p,
  blockquote,
  table,
  th,
  td,
  address {
    font-size: 3.4vw;
  }

  /*********index*********/
  #index .h201 .h301 .detailArea .lead {
    top: -2vw;
    left: 7%;
  }

  #index .h201 .h301 .detailArea .lead span {
    padding: .2vw 2vw;
  }

  #index .h201 .h301 .detailArea .lead span:before {
    height: 6.3vw;
    left: -1.9vw;
    width: 2vw;
  }

  #index .h201 .h301 .detailArea .lead span:after {
    height: 6.3vw;
    right: -1.9vw;
    width: 2vw;
  }

  #index .h201 .h301 .detailArea .cate li {
    margin-right: 4vw;
    padding: .3vw 2vw .2vw 2vw;
  }

  #index .h201 .h301 .detailArea .cate li:before {
    height: 5.5vw;
    left: -2.9vw;
    width: 3vw;
  }
}