@media (max-width:767px) {
  .wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px auto 0
  }

  .wp-pagenavi a,
  .wp-pagenavi span {
    margin: 0 3px
  }
}
}

@media screen and (max-width:767px) {
  .newsMain {
    background-color: #fafafa
  }

  .newsList {
    margin: -20px 0 50px
  }

  .pageTitle--news {
    background-image: url(../../assets/img/page_news.jpg);
    margin: 0 0 50px;
    position: relative
  }

  .newsIllust01 {
    bottom: -32px;
    left: 10px;
    position: absolute;
    width: 150px
  }

  .newsList__item {
    margin: 0 0 10px
  }

  .newsList__item a {
    background-color: #fff;
    background-image: url(../../assets/img/arrow04.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 6px auto;
    color: #715e47;
    display: block;
    padding: 20px
  }

  .newsList__item .newsList__cate {
    align-items: center;
    display: flex
  }

  .newsList__item .newsList__cate span {
    background-color: #d5969a;
    border-radius: .4vh;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 0 20px;
    padding: 0 20px 2px
  }

  .newsContent {
    margin: 0 0 30px;
    padding: 20px 30px
  }

  .newsContent h1 {
    background-color: #fdeee8;
    color: #d5969a;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.5;
    padding: 0 10px;
    text-align: left
  }

  .newsContent h2 {
    background: #fcfaf5;
    border-left: 4px solid #d5969a;
    display: inline;
    display: block;
    font-size: 1.7rem;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 5px 10px 5px 15px
  }

  .newsContent h3 {
    background-color: rgba(213, 150, 154, .2);
    font-size: 1.5rem;
    margin: 40px 0 25px;
    width: 100%
  }

  .newsContent h3,
  .newsContent h4 {
    clear: both;
    line-height: 1.3;
    padding: 0 2px
  }

  .newsContent h4 {
    font-size: 1.4rem;
    margin: 30px 0 20px
  }

  .newsContent h5 {
    border-left: 5px solid #d5969a;
    clear: both;
    font-size: 1.25em;
    line-height: 1.2;
    margin: 20px 0 10px;
    padding: 0 20px
  }

  .newsContent h6 {
    background-color: #d5969a;
    color: #fff;
    display: inline;
    font-size: 1rem;
    line-height: 1.2;
    padding: 4px 10px
  }

  .newsContent p {
    clear: both;
    font-size: 100%;
    line-height: 2;
    margin: 0 0 30px
  }

  .newsContent img {
    height: auto !important;
    max-width: 100% !important
  }

  .newsContent p a {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 20px auto;
    color: #8c001d;
    padding-right: 30px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px
  }

  .newsContent a {
    word-break: break-all
  }

  .newsContent ol,
  .newsContent ul {
    padding: 10px 30px
  }

  .newsContent ol li,
  .newsContent ul li {
    margin-bottom: 8px
  }

  .newsContent blockquote {
    background-color: #ddd;
    margin: 0 0 10px;
    padding: 1.2em 3em .5em;
    position: relative
  }

  .newsContent blockquote:before {
    color: #999;
    content: "“";
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0
  }

  .newsContent blockquote:after {
    bottom: 0;
    color: #999;
    content: "”";
    font-size: 600%;
    line-height: 1em;
    position: absolute;
    right: 0
  }

  .newsContent dt {
    font-weight: 700
  }

  .newsContent table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 110%;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: left;
    width: 100%
  }

  .newsContent caption {
    font-size: 120%;
    font-weight: 100;
    margin-bottom: 10px;
    text-align: left
  }

  .newsContent th {
    background-color: hsla(17, 84%, 95%, .2);
    font-weight: 500;
    font-weight: 700;
    padding: 5px;
    text-align: center;
    vertical-align: top;
    white-space: nowrap
  }

  .newsContent td {
    line-height: 2;
    padding: 5px;
    text-align: center
  }

  .newsContent tfoot {
    font-size: 90%;
    font-weight: 100;
    line-height: 1.7
  }

  .newsContent h1.newsContent__title {
    background-color: #fff;
    color: #715e47;
    font-size: 2rem;
    margin: 0 0 5px;
    padding: 0
  }

  .basicBtn--article {
    margin: 0 0 100px
  }

  .basicBtn--article a {
    padding: 14px 50px 14px 40px
  }

  p.newsContent__cate {
    margin: 0 0 30px
  }

  p.newsContent__cate span {
    background-color: #d5969a;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    margin: 0 10px 0 0;
    padding: 1px 10px 2px
  }

  p.newsContent__cate time {
    font-size: 1.2rem
  }
}

@media print,
screen and (min-width:768px) {
  .newsMain {
    background-color: #fafafa
  }

  .centerWrap--news {
    padding: 118px 0 50px
  }

  .newsList {
    margin: -20px 0 50px
  }

  .pageTitle--news {
    background-image: url(../../assets/img/page_news.jpg);
    position: relative
  }

  .newsIllust01 {
    bottom: -65px;
    position: absolute;
    right: 130px;
    width: 298px
  }

  .newsList__item {
    margin: 0 0 10px
  }

  .newsList__item a {
    background-color: #fff;
    background-image: url(../../assets/img/arrow04.png);
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 6px auto;
    color: #715e47;
    display: block;
    padding: 25px 30px 35px
  }

  .newsList__item .newsList__cate {
    align-items: center;
    display: flex
  }

  .newsList__item .newsList__cate span {
    background-color: #d5969a;
    border-radius: .4vh;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 0 20px;
    padding: 0 20px 2px
  }

  .newsContent {
    margin: 0 auto 60px;
    padding: 50px 0
  }

  .newsContent h1 {
    background-color: #fdeee8;
    color: #d5969a;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 500;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 0 10px;
    text-align: left
  }

  .newsContent h2 {
    background: #fcfaf5;
    border-left: 9px solid #d5969a;
    display: inline;
    display: block;
    font-size: 2rem;
    line-height: 1.5;
    margin: 0 0 50px;
    padding: 5px 10px 5px 30px
  }

  .newsContent h3 {
    background-color: rgba(213, 150, 154, .2);
    font-size: 2rem;
    margin: 40px 0 25px;
    width: 100%
  }

  .newsContent h3,
  .newsContent h4 {
    clear: both;
    line-height: 1.3;
    padding: 0 2px
  }

  .newsContent h4 {
    font-size: 1.8rem;
    margin: 30px 0 20px
  }

  .newsContent h5 {
    border-left: 5px solid #d5969a;
    clear: both;
    margin: 20px 0 10px;
    padding: 0 20px
  }

  .newsContent h5,
  .newsContent h6 {
    font-size: 1.8rem;
    line-height: 1.2
  }

  .newsContent h6 {
    background-color: #d5969a;
    color: #fff;
    display: inline;
    padding: 4px 10px
  }

  .newsContent p {
    clear: both;
    font-size: 1.8rem;
    line-height: 2;
    margin: 0 0 70px
  }

  .newsContent img {
    height: auto !important;
    max-width: 100% !important
  }

  .newsContent p a {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 20px auto;
    color: #d5969a;
    padding-right: 30px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px
  }

  .newsContent a {
    color: #d5969a;
    word-break: break-all
  }

  .newsContent ol,
  .newsContent ul {
    padding: 10px 30px
  }

  .newsContent ol li,
  .newsContent ul li {
    list-style-type: disc;
    margin-bottom: 8px
  }

  .newsContent blockquote {
    background-color: #ddd;
    margin: 0 0 10px;
    padding: 1.2em 3em .5em;
    position: relative
  }

  .newsContent blockquote:before {
    color: #999;
    content: "“";
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0
  }

  .newsContent blockquote:after {
    bottom: 0;
    color: #999;
    content: "”";
    font-size: 600%;
    line-height: 1em;
    position: absolute;
    right: 0
  }

  .newsContent dt {
    font-weight: 700
  }

  .newsContent table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 110%;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 30px 0;
    text-align: left;
    width: 100%
  }

  .newsContent caption {
    font-size: 120%;
    font-weight: 100;
    margin-bottom: 10px;
    text-align: left
  }

  .newsContent th {
    font-weight: 500;
    padding: 5px 5px 5px 0;
    white-space: nowrap
  }

  .newsContent td,
  .newsContent th {
    text-align: left;
    vertical-align: top
  }

  .newsContent td {
    line-height: 2;
    padding: 0 15px 5px 0
  }

  .newsContent tfoot {
    font-size: 90%;
    font-weight: 100;
    line-height: 1.7
  }

  .newsContent h1.newsContent__title {
    background-color: #fff;
    color: #715e47;
    font-size: 2.7rem;
    padding: 0
  }

  .basicBtn--article {
    margin: 0 0 100px
  }

  .basicBtn--article a {
    padding: 14px 100px 14px 90px
  }

  p.newsContent__cate {
    margin: 0 0 50px
  }

  p.newsContent__cate span {
    background-color: #d5969a;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2rem;
    margin: 0 10px 0 0;
    padding: 1px 10px 2px
  }

  p.newsContent__cate time {
    font-size: 1.2rem
  }
}