@charset "UTF-8";
/* Transitional layout source: legacy declaration order is intentionally preserved. */
/* Transitional layout source: legacy declaration order is intentionally preserved. */
/* stylelint-disable @stylistic/number-leading-zero -- Prettier requires leading zeros. */
/* Transitional component source: legacy declaration order is intentionally preserved. */
/* Transitional component source: legacy declaration order is intentionally preserved. */
/* Transitional component source: legacy declaration order is intentionally preserved. */
/* stylelint-disable @stylistic/number-leading-zero -- Prettier requires leading zeros. */
/* stylelint-disable @stylistic/number-leading-zero, font-weight-notation -- Legacy values are preserved. */
/* Transitional archive layout: class names remain compatible with the legacy templates. */
/* Transitional project source: legacy declaration order is intentionally preserved. */
/* stylelint-disable @stylistic/number-leading-zero -- Prettier requires leading zeros. */
/* Transitional front-page source: legacy cascade positions are exposed as mixins. */
/* Transitional member source: legacy cascade positions are exposed as mixins. */
/*
 * Equivalent responsive structure generated from the copied legacy PC/SP CSS.
 * Repeated selectors are intentional where source order differs by breakpoint.
 */
/* --------------------------------------------------
 * common styles
 */
/* --------------------------------------------------
 * common styles
 */
@media screen and (max-width: 720px) {
  html {
    font-size: 13.3333333333vw;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  margin: 0;
}
@media screen and (max-width: 720px) {
  body {
    font-size: 100%;
  }
}

a {
  text-decoration: none;
}

img {
  vertical-align: baseline;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* --------------------------------------------------
 * layout, common-parts
 */
@media screen and (min-width: 721px) {
  .sp {
    display: none !important;
  }
}

/* --------------------------------------------------
 * layout, common-parts
 */
@media screen and (max-width: 720px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 721px) {
  .tablet {
    display: none !important;
  }
}
@media screen and (max-width: 720px) {
  .tablet {
    /*display: none!important;*/
  }
}

@media screen and (min-width: 721px) {
  .wrap-all {
    width: 100%;
  }
}
@media screen and (max-width: 720px) {
  .wrap-all {
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  .wrap {
    position: relative;
    width: 1056px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 720px) {
  .wrap {
    position: relative;
    width: 90.84%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 721px) {
  .header {
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100px;
    background: #ffe600;
    border-bottom: 4px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .header {
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 1rem;
    background: #ffe600;
    border-bottom: 0.06rem solid #000;
    /*ハンバーガーボタン*/
  }
}

@media screen and (min-width: 721px) {
  .header .wrap {
    position: relative;
    width: 1016px;
    height: 100px;
  }
}
@media screen and (max-width: 720px) {
  .header .wrap {
    position: relative;
    width: 88.89%;
    height: 1rem;
  }
}

@media screen and (min-width: 721px) {
  .header .wrap h1 {
    position: absolute;
    z-index: 10;
    max-width: 180px;
  }
}
@media screen and (max-width: 720px) {
  .header .wrap h1 {
    position: absolute;
    z-index: 10;
    width: 25.16%;
  }
}

@media screen and (min-width: 721px) {
  .header .wrap h1 a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  .header .wrap h1 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 720px) {
  .header .wrap h1 img {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 720px) {
  .header .btn {
    display: block !important;
    position: relative;
    z-index: 101;
    float: right;
    width: 0.74rem;
    height: 0.74rem;
    margin-top: 0.1rem;
    background: #000;
  }
}

@media screen and (max-width: 720px) {
  .header .btn span {
    position: absolute;
    top: 0.23rem;
    left: 50%;
    transform: translateX(-50%);
    width: 51.35%;
    height: 0.04rem;
    background: #fff;
    transition: all 0.4s;
  }
}

@media screen and (max-width: 720px) {
  .header .btn span:nth-child(2) {
    top: 0.35rem;
  }
}

@media screen and (max-width: 720px) {
  .header .btn span:last-child {
    top: 0.47rem;
  }
}

@media screen and (max-width: 720px) {
  .header .btn.active span:first-child {
    transform: translateY(0.12rem) translateX(-50%) rotate(45deg);
  }
}

@media screen and (max-width: 720px) {
  .header .btn.active span:nth-child(2) {
    opacity: 0;
  }
}

@media screen and (max-width: 720px) {
  .header .btn.active span:last-child {
    transform: translateY(-0.12rem) translateX(-50%) rotate(-45deg);
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav {
    float: right;
    height: 100px;
    margin-right: 15px;
  }
}
@media screen and (max-width: 720px) {
  .header .global-nav {
    display: none;
    position: absolute;
    top: 0;
    right: -7%;
    z-index: 100;
    width: 96.72%;
    height: 100vh;
    background: #000;
    opacity: 0.85;
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav ul {
    height: 100px;
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .header .global-nav ul {
    height: auto;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav ul li {
    display: inline-block;
    height: 100px;
    line-height: 100px;
  }
}
@media screen and (max-width: 720px) {
  .header .global-nav ul li {
    display: block;
    width: 96.78%;
    height: 1rem;
    background: url("../img/common/navi-arrow-sp.png") no-repeat;
    background-size: 0.14rem 0.23rem;
    background-position: right 0.6rem top 50%;
    line-height: 1rem;
    border-bottom: 0.02rem solid #4d4d4d;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul li:first-child {
    height: 0.9rem;
    background: none;
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav ul li a {
    position: relative;
    margin-left: 35px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    line-height: 80px;
  }
}
@media screen and (max-width: 720px) {
  .header .global-nav ul li a {
    display: block;
    width: 100%;
    height: 1rem;
    color: #fff;
    font-size: 0.24rem;
    font-weight: bold;
    text-align: center;
    line-height: 1rem;
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav ul li a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  .header .global-nav ul li a:hover::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -7px;
    padding: 0 10px;
    left: -4px;
    width: calc(100% + 8px);
    height: 3px;
    background: #333;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul:nth-child(2) {
    display: block !important;
    width: 0.7rem;
    margin: 0 auto;
    padding-top: 0.4rem;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul:nth-child(2) li {
    width: 0.7rem;
    background: initial;
    border-bottom: none;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul:nth-child(2) li:nth-child(1) {
    float: left;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul:nth-child(2) li a {
    padding-left: 0;
  }
}

@media screen and (max-width: 720px) {
  .header .global-nav ul:nth-child(2) li a img {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns {
    margin-top: 25px;
    float: right;
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .header .header-sns {
    display: none;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li {
    width: 42px;
    height: 42px;
    display: inline-block;
    margin-left: 10px;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li a {
    display: block;
    width: 42px;
    height: 42px;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li:nth-child(1) a {
    background: url(../img/common/header-x.png) no-repeat;
    background-size: 42px;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li:nth-child(1) a:hover {
    opacity: 1;
    background: url(../img/common/header-x-hover.png) no-repeat;
    background-size: 42px;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li:nth-child(2) a {
    background: url(../img/common/header-ig.png) no-repeat;
    background-size: 42px;
  }
}

@media screen and (min-width: 721px) {
  .header .header-sns li:nth-child(2) a:hover {
    opacity: 1;
    background: url(../img/common/header-ig-hover.png) no-repeat;
    background-size: 42px;
  }
}

.header .btn {
  padding: 0;
  cursor: pointer;
  border: 0;
}

.header .btn:focus-visible,
.global-nav a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.header .global-nav.is-open {
  display: block;
}

/*リンク[黒ブロック]*/
/*リンク[黒ブロック]*/
@media screen and (min-width: 721px) {
  .link {
    height: 60px;
  }
}
@media screen and (max-width: 720px) {
  .link {
    /*display: flex;*/
    height: 0.1rem;
  }
}

@media screen and (min-width: 721px) {
  .link a {
    display: block;
    height: 60px;
    padding-right: 67px;
    padding-left: 67px;
    background: url("../img/common/link-allow.png") no-repeat #000;
    background-position: right 21px top 20px;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
  }
}
@media screen and (max-width: 720px) {
  .link a {
    display: block;
    height: 1rem;
    background: url("../img/common/link-allow.png") no-repeat #000;
    background-position: right 0.3rem top 0.4rem;
    background-size: 0.12rem 0.21rem;
    color: #fff;
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 1rem;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  .link a:hover {
    background: url("../img/common/link-allow-hover.png") no-repeat #000;
    background-position: right 21px top 20px;
    color: #ffe600;
    opacity: 1;
  }
}

/*背景[原稿用紙]ブロック*/
/*背景[原稿用紙]ブロック*/
@media screen and (min-width: 721px) {
  .draft {
    display: inline-block;
    width: 100%;
    height: 592px;
    height: auto;
    margin-bottom: 42px;
    background: url(../img/common/draft.jpg);
    border-bottom: 4px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .draft {
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    /*margin-bottom: 3.73rem;*/
    background: url(../img/common/draft.jpg);
    background-size: 0.6rem 0.5rem;
    border-bottom: 0.06rem solid #000;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .draft .wrap {
    display: block;
    position: relative;
  }
}
@media screen and (max-width: 720px) {
  .draft .wrap {
    display: block;
    position: initial;
  }
}

@media screen and (min-width: 721px) {
  .draft .wrap .article-image {
    position: relative;
    top: 40px;
  }
}
@media screen and (max-width: 720px) {
  .draft .wrap .article-image {
    display: grid;
    position: relative;
    /*padding-top: 0.3rem;*/
    top: 0.3rem;
    width: 100%;
    margin: 0 auto;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .draft .wrap .article-image img {
    width: calc(100% - 2px);
    height: auto;
    margin: 0 auto;
    border: 1px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .draft .wrap .article-image img {
    width: calc(100% - 2px);
    height: auto;
    border: 1px solid #000;
    font-size: 0;
  }
}

.article-image img,
#tinymce img {
  max-width: 100%;
  height: auto;
}

/*イベント情報*/
/*イベント情報*/
@media screen and (min-width: 721px) {
  .event.wrap {
    display: table;
    height: 80px;
    margin-bottom: 40px;
    background: #fff;
    border: 1px solid #000;
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap {
    display: table;
    height: 1rem;
    margin-bottom: 0.4rem;
    background: #fff;
    border: 1px solid #000;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap > p {
    display: inline-block;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap > p {
    display: inline-block;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .title {
    display: table-cell;
    width: 250px;
    height: 80px;
    background: #000;
    color: #ffe600;
    font-size: 22px;
    line-height: 80px;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .title {
    display: table-cell;
    width: 2rem;
    height: 1rem;
    background: #000;
    color: #ffe600;
    font-size: 0.22rem;
    line-height: 1rem;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: calc(100% - 252px);
    height: 80px;
    padding: 0 38px;
    font-size: 20px;
    line-height: 1.55;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: calc(100% - 2rem);
    height: 1rem;
    padding: 0 0.32rem;
    font-size: 0.22rem;
    line-height: 1.55;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 38px;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .item > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item > div:first-child {
    display: block;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .item > div:first-child {
    display: block;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item > div p {
    display: table;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .item > div p {
    display: table;
    width: 100%;
    height: 100%;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item a,
  .event.wrap .item span {
    display: table-cell;
    vertical-align: middle;
    color: #000;
    font-size: 20px;
    line-height: 1.55;
  }
}
@media screen and (max-width: 720px) {
  .event.wrap .item a,
  .event.wrap .item span {
    display: table-cell;
    vertical-align: middle;
    color: #000;
    font-size: 0.22rem;
    line-height: 1.55;
  }
}

@media screen and (min-width: 721px) {
  .event.wrap .item a:hover {
    text-decoration: underline;
  }
}

@media screen and (max-width: 720px) {
  .event.wrap .item a {
    text-decoration: underline;
  }
}

@media screen and (min-width: 721px) {
  .quadrupleline {
    height: 96px;
    margin-bottom: 40px;
    color: #000;
    font-family: "Yu Mincho", "YuMincho";
    font-size: 40px;
    font-weight: bold;
    line-height: 96px;
    text-align: center;
    background: url(../img/about/about-title-bg.png) repeat-x;
  }
}
@media screen and (max-width: 720px) {
  .quadrupleline {
    height: 1.28rem;
    margin-bottom: 0.4rem;
    color: #000;
    font-family: "Yu Mincho", "YuMincho";
    font-size: 0.36rem;
    font-weight: bold;
    line-height: 1.28rem;
    text-align: center;
    background: url(../img/about/about-title-bg.png) repeat-x;
    background-size: 1px 1.28rem;
  }
}

/*記事一覧（6件）*/
@media screen and (min-width: 721px) {
  .latest.wrap ul {
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li {
    display: inline-block;
    width: 31.44%;
    margin-right: 2.84%;
    margin-bottom: 30px;
    overflow: hidden;
    vertical-align: top;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li > a {
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li:nth-child(n+4) {
    margin-bottom: 50px;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-image {
    width: 100% !important;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-info {
    display: table;
    width: 95%;
    margin: 0 auto;
    margin-top: -38px;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-info .title {
    display: inline-block;
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-info .title .category {
    display: inline-block;
    height: 24px;
    padding: 0 20px;
    background: #000;
    margin-bottom: 5px;
    color: #ffe600;
    font-size: 12px;
    line-height: 24px;
    font-weight: bold;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-info .title .article-title {
    background: url("../img/top/recommended-title-bg.png");
    background-size: 36px;
    background-position: 0px 0px;
    margin-bottom: 5px;
    padding: 0 15px;
    font-size: 24px;
    line-height: 34px;
    font-style: italic;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .article-info .title .article-title .item {
    padding: 0px 0;
    line-height: 1;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author {
    float: left;
    font-size: 0;
    overflow: hidden;
    margin: 0 0 0 10px;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author a, .latest.wrap ul li .author .author-attribution {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author .author-image {
    float: left;
    width: 37px;
    height: auto;
    margin-right: 10px;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author .author-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author .author-name {
    float: left;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .author:hover .author-name {
    color: #fff;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .time {
    float: right;
    font-size: 0;
    margin: 0 10px 0 0;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li .time time {
    font-size: 12px;
    line-height: 37px;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap span.link {
    display: block;
    width: 550px;
    margin: 0 auto;
    margin-bottom: 50px;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap span.link a {
    width: 550px;
    padding: 0;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap span.link a:hover {
    background: url(../img/common/link-allow-black.png) no-repeat #fff;
    background-position: right 21px top 20px;
    color: #000;
  }
}

/*記事詳細[タイトル・記事情報]*/
/*記事詳細[タイトル・記事情報]*/
@media screen and (min-width: 721px) {
  .article-info.wrap {
    display: block;
    position: relative;
    top: -80px;
    /*left: 20px;*/
    z-index: 2;
    width: 1016px;
    margin-bottom: -53px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap {
    display: block;
    width: 87.61%;
    margin: 0 auto;
    margin-top: -0.76rem;
    margin-bottom: 0.3rem;
    font-size: 0;
    /*overflow: hidden;*/
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap::before {
    content: "";
    display: block;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .category {
    display: inline-block;
    position: relative;
    z-index: 5;
    margin: 0 0 5px;
    height: 36px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .category {
    display: inline-block;
    margin: 0 0 0.05rem;
    height: 0.32rem;
    padding: 0 0.2rem;
    background: #fff;
    font-size: 0.18rem;
    font-weight: bold;
    line-height: 0.32rem;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .category a {
    display: inline-block;
    height: 36px;
    padding: 0 20px;
    background: #fff;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    line-height: 36px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .category a {
    color: #000;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .category a:hover {
    opacity: 1;
    background: #000;
    color: #fff;
    font-size: 20px;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .article-title {
    position: relative;
    width: 95%;
    background: url(../img/top/article-title-bg.png);
    background-size: 67px;
    /*background-size: 57px;*/
    margin-bottom: 25px;
    padding: 0 20px;
    font-size: 28px;
    line-height: 57px;
    line-height: 67px;
    font-style: italic;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .article-title {
    background: url(../img/top/recommended-title-bg-hover.png);
    background-size: 0.59rem;
    margin-bottom: 0.1rem;
    padding: 0 0.2rem;
    font-size: 0.28rem;
    line-height: 0.57rem;
    font-style: italic;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .article-title span {
    position: relative;
    top: 3px;
    color: #ffe600;
    font-style: italic;
    font-size: 44px;
    font-weight: bold;
    line-height: 26px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .article-title span {
    color: #ffe600;
    font-style: italic;
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.26rem;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info {
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .info {
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info .tag {
    float: left;
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .info .tag {
    font-size: 0;
    margin-bottom: 0.2rem;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info .tag li {
    display: inline-block;
    height: 35px;
    margin-right: 10px;
    line-height: 35px;
    background: #fff;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .info .tag li {
    display: inline-block;
    height: 0.5rem;
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
    line-height: 0.5rem;
    background: #fff;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info .tag li a, .article-info.wrap .info .tag li .member-attribution {
    display: block;
    height: 35px;
    padding: 0 20px;
    color: #000;
    font-size: 16px;
    line-height: 35px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .info .tag li a, .article-info.wrap .info .tag li .member-attribution {
    display: block;
    height: 0.5rem;
    padding: 0 0.2rem;
    color: #000;
    font-size: 0.22rem;
    line-height: 0.5rem;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info .tag li a:hover {
    background: #000;
    color: #fff;
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  .article-info.wrap .info time {
    float: right;
    font-size: 16px;
    line-height: 35px;
  }
}
@media screen and (max-width: 720px) {
  .article-info.wrap .info time {
    display: block;
    font-size: 0.2rem;
  }
}

/*SNSブロック*/
/*下部に存在したSNSブロック、上部のSNSのために残す*/
/*SNSブロック*/
/*下部に存在したSNSブロック、上部のSNSのために残す*/
@media screen and (min-width: 721px) {
  .sns {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 720px) {
  .sns {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  .sns ul {
    font-size: 0;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  .sns ul {
    width: 83.33%;
    margin: 0 auto;
    font-size: 0;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  .sns ul li {
    display: inline-block;
    margin-left: 5px;
  }
}
@media screen and (max-width: 720px) {
  .sns ul li {
    display: inline-block;
    width: 23.67%;
    margin-left: 0.1rem;
  }
}

@media screen and (min-width: 721px) {
  .sns ul li:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 720px) {
  .sns ul li:first-child {
    margin-left: 0;
  }
}

@media screen and (max-width: 720px) {
  .sns ul li a {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 720px) {
  .sns ul li a img {
    width: 100%;
    height: auto;
  }
}

/*コンテンツ[記者 ＆ SNSブロック]*/
/*コンテンツ[記者 ＆ SNSブロック]*/
@media screen and (min-width: 721px) {
  .contents {
    background: #fff;
    border: 1px solid #000;
    padding: 40px 72px 50px;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .contents {
    background: #fff;
    border: 1px solid #000;
    padding: 0.3rem 0.2rem 0.6rem;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .contents .author {
    float: left;
    margin-bottom: 40px;
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .contents .author {
    float: left;
    margin-bottom: 0.3rem;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .contents .author > p {
    float: left;
  }
}
@media screen and (max-width: 720px) {
  .contents .author > p {
    float: left;
  }
}

@media screen and (min-width: 721px) {
  .contents .author .author-image {
    width: 70px;
    height: auto;
    margin-right: 20px;
  }
}
@media screen and (max-width: 720px) {
  .contents .author .author-image {
    width: 0.7rem;
    height: auto;
    margin-right: 0.2rem;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .contents .author .author-image img {
    width: 70px;
    height: auto;
    border: 1px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .contents .author .author-image img {
    width: 0.7rem;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .contents .author .author-name {
    font-size: 18px;
    font-weight: bold;
    line-height: 70px;
  }
}
@media screen and (max-width: 720px) {
  .contents .author .author-name {
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.7rem;
  }
}

@media screen and (min-width: 721px) {
  .contents .sns {
    float: right;
    margin-top: 12px;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 720px) {
  .contents .sns {
    clear: both;
    margin-top: 0;
    margin-bottom: 0.3rem;
  }
}

@media screen and (max-width: 720px) {
  .contents .sns ul {
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  .contents .sns ul li {
    width: 23.67%;
  }
}

@media screen and (max-width: 720px) {
  .contents .sns ul li a {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 720px) {
  .contents .sns ul li a img {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  .contents .sns + section {
    clear: both;
  }
}
@media screen and (max-width: 720px) {
  .contents .sns + section {
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  #article-detail #main > .contents.wrap.article + .author-block.contents.wrap {
    margin-top: 30px;
  }
}
@media screen and (max-width: 720px) {
  #article-detail #main > .contents.wrap.article + .author-block.contents.wrap {
    margin-top: 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  #article-detail #main > .contents.wrap.article + .wrap.article-link {
    margin-top: 50px;
  }
}
@media screen and (max-width: 720px) {
  #article-detail #main > .contents.wrap.article + .wrap.article-link {
    margin-top: 0.6rem;
  }
}

/*.contents.article {
  margin-top: -53px;
}*/
@media screen and (min-width: 721px) {
  #tinymce .pagenav {
    margin-top: 30px;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .pagenav {
    margin-top: 0.4rem;
  }
}
#tinymce .pagenav > div {
  display: flex;
  justify-content: center;
  font-size: 0;
}
@media screen and (min-width: 721px) {
  #tinymce .pagenav > div {
    gap: 10px;
    min-height: 50px;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .pagenav > div {
    gap: 0.1rem;
    min-height: 0.5rem;
  }
}
#tinymce .pagenav > div > a,
#tinymce .pagenav > div > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 721px) {
  #tinymce .pagenav > div > a,
  #tinymce .pagenav > div > span {
    width: 50px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .pagenav > div > a,
  #tinymce .pagenav > div > span {
    width: 0.5rem;
    height: 0.5rem;
    font-size: 0.18rem;
    line-height: 0.5rem;
  }
}
#tinymce .pagenav > div > a {
  color: #fff;
  text-decoration: none;
  background: #000;
}
#tinymce .pagenav > div > a:hover, #tinymce .pagenav > div > a:focus-visible {
  color: #000;
  background: #ffe600;
}
#tinymce .pagenav > div > span {
  color: #000;
  background: #ffe600;
}
#tinymce .pagenav a span {
  color: inherit;
}

/*下部記者エリア*/
/*下部記者エリア*/
@media screen and (min-width: 721px) {
  .contents.wrap.author-block {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block {
    clear: both;
    margin-top: 0;
    margin-bottom: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom {
    width: 100%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom {
    width: 100%;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header {
    height: 61px;
    margin-bottom: 32px;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header {
    height: 0.6rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header::after {
    content: "";
    clear: both;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header::after {
    content: "";
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 {
    display: flex;
    float: left;
    width: calc(100% - 354px);
    height: 61px;
    background-size: 10px 61px;
    font-size: 24px;
    font-weight: bold;
    line-height: 61px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 {
    display: flex;
    float: left;
    width: 100%;
    height: 0.6rem;
    background-size: 0.1rem 0.6rem;
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header h2:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 61px;
    margin-right: 20px;
    background: #ffe600;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header h2:before {
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.6rem;
    margin-right: 0.2rem;
    background: #ffe600;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 + .link {
    float: right;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 + .link {
    float: right;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 + .link::after {
    content: "";
    clear: both;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-header h2 + .link::after {
    content: "";
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block {
    display: table;
    position: relative;
    width: 100%;
    margin-top: 32px;
    padding: 30px;
    background: #ffe600;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block {
    display: table;
    position: relative;
    width: 100%;
    margin-top: 0.32rem;
    margin-bottom: 0.41rem;
    padding: 0.3rem;
    background: #ffe600;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-image {
    float: left;
    width: 20%;
    height: auto;
    margin-right: 0;
    padding-right: 30px;
    border: none;
    overflow: visible;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-image {
    float: left;
    width: 30.36%;
    height: auto;
    margin-right: 0;
    margin-bottom: 0.3rem;
    padding-right: 0.4rem;
    border: none;
    overflow: visible;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile {
    float: left;
    width: calc(80% - 250px);
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile {
    float: left;
    width: 69.64%;
    /*padding-left: 0.4rem;*/
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile.nophoto {
    width: calc(80% - 80px);
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name {
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name {
    margin-top: 0.1rem;
    margin-bottom: 0.22rem;
    font-size: 0;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name > p {
    display: inline-block;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name .author-name {
    font-size: 26px;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name .author-name {
    font-size: 0.28rem;
    font-weight: bold;
    line-height: 0.42rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name .author-kana {
    font-size: 18px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name .author-kana {
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 0.42rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .author-discription {
    font-size: 16px;
    line-height: 2;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link {
    float: right;
    width: 220px;
    margin-left: 30px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link {
    float: left;
    width: 69.64%;
    margin-bottom: 0.3rem;
    /*padding-left: 0.4rem;*/
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link {
    position: absolute;
    bottom: 30px;
    width: 220px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link {
    /*position: absolute;*/
    bottom: 30px;
    width: 3.5rem;
    height: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link a {
    width: 100%;
    padding-right: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link a {
    width: 100%;
    height: 0.6rem;
    padding-right: 0;
    font-size: 0.22rem;
    line-height: 0.6rem;
    background: url(../img/common/link-allow.png) no-repeat #000;
    background-position: right 0.21rem top 0.2rem;
    background-size: 0.12rem 0.21rem;
  }
}

@media screen and (min-width: 721px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link a:hover {
    background: url(../img/common/link-allow-hover.png) no-repeat #000;
    background-position: right 21px top 20px;
    opacity: 1;
  }
}

@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-discription {
    clear: both;
    color: #000;
    font-size: 0.26rem;
    line-height: 0.46rem;
  }
}

@media screen and (max-width: 720px) {
  .contents.wrap.author-block > .author.bottom .author-block + .link {
    display: block;
    width: 93.33%;
    height: 1rem;
    margin: 0 auto;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .related-member__list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 721px) {
  .related-member__item {
    width: calc((100% - 90px) / 3);
    margin-right: 45px;
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 720px) {
  .related-member__item {
    width: 5.7rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 721px) {
  .related-member__item:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 721px) {
  .related-member__item:nth-child(1),
  .related-member__item:nth-child(2),
  .related-member__item:nth-child(3) {
    margin-top: 0;
  }
}

@media screen and (max-width: 720px) {
  .related-member__item:last-child {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 721px) {
  .related-member__thumb {
    margin-bottom: 20px;
    width: 44%;
  }
}
@media screen and (max-width: 720px) {
  .related-member__thumb {
    width: 1.4rem;
  }
}

@media screen and (min-width: 721px) {
  .related-member__thumb a {
    transition: all 450ms ease;
  }
}

@media screen and (min-width: 721px) {
  .related-member__thumb a:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 721px) {
  .related-member__thumb img {
    max-width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .related-member__thumb img {
    max-width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .related-member__remain {
    width: 50%;
  }
}
@media screen and (max-width: 720px) {
  .related-member__remain {
    width: 3.9rem;
  }
}

@media screen and (min-width: 721px) {
  .related-member__name {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 26px;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  .related-member__name {
    margin-bottom: 0.1rem;
    font-size: 0.3rem;
    line-height: 0.36rem;
    font-weight: bold;
  }
}

@media screen and (min-width: 721px) {
  .related-member__position {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 720px) {
  .related-member__position {
    margin-bottom: 0.1rem;
    font-size: 0.24rem;
  }
}

@media screen and (min-width: 721px) {
  .related-member__link {
    font-size: 16px;
  }
}
@media screen and (max-width: 720px) {
  .related-member__link {
    font-size: 0.24rem;
  }
}

@media screen and (min-width: 721px) {
  .related-member__link a {
    color: inherit;
    text-decoration: underline;
  }
}
@media screen and (max-width: 720px) {
  .related-member__link a {
    color: inherit;
    text-decoration: underline;
  }
}

.wrap.article-link {
  overflow: hidden;
  clear: both;
}
.wrap.article-link h2 {
  width: 100%;
  font-style: italic;
  font-weight: bold;
  color: #fff;
  background: #000;
}
@media screen and (min-width: 721px) {
  .wrap.article-link h2 {
    height: 80px;
    padding-left: 30px;
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 80px;
  }
}
@media screen and (max-width: 720px) {
  .wrap.article-link h2 {
    height: 0.8rem;
    padding-left: 0.2rem;
    margin-bottom: 0.4rem;
    font-size: 0.28rem;
    line-height: 0.8rem;
  }
}
.wrap.article-link h2 a {
  display: block;
  width: 100%;
  color: #fff;
}
@media screen and (min-width: 721px) {
  .wrap.article-link h2 a {
    height: 80px;
  }
  .wrap.article-link h2 a:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 720px) {
  .wrap.article-link h2 a {
    height: 0.8rem;
    background: #000;
  }
}

/*記事リンクリスト*/
/*記事リンクリスト*/
@media screen and (min-width: 721px) {
  .article-list {
    font-size: 0;
  }
}
@media screen and (max-width: 720px) {
  .article-list {
    margin-bottom: 0.4rem;
    font-size: 0;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .article-list li {
    position: relative;
    float: left;
    width: 31.44%;
    max-width: 332px;
    margin-right: 2.84%;
    margin-bottom: 30px;
    overflow: hidden;
    vertical-align: top;
  }
}
@media screen and (max-width: 720px) {
  .article-list li {
    position: relative;
    width: 100%;
    margin-bottom: 0.4rem;
    overflow: hidden;
    vertical-align: top;
  }
}

@media screen and (min-width: 721px) {
  .article-list li a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .article-list li:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 721px) {
  .article-list li:nth-child(3n-2) {
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .article-image {
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .article-image img {
    width: 100%;
    border: 1px solid #000;
  }
}

@media screen and (max-width: 720px) {
  .article-list li:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 720px) {
  .article-list li:nth-child(3n+1) {
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .article-info {
    position: relative;
    display: block;
    z-index: 1;
    width: 89.16%;
    margin: -39px auto 0;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .article-info {
    position: relative;
    display: block;
    z-index: 1;
    width: 93.75%;
    margin: -0.66rem auto 0;
    margin-bottom: 0.1rem;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .article-info .article-title {
    background: url("../img/top/recommended-title-bg.png");
    background-size: 34px;
    background-position: 0px 0px;
    margin-bottom: 5px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 34px;
    font-style: italic;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .article-info .article-title {
    background: url(../img/top/recommended-title-bg.png);
    background-size: 0.46rem;
    margin-bottom: 0.05rem;
    padding: 0 0.15rem;
    font-size: 0.32rem;
    line-height: 0.34rem;
    font-style: italic;
  }
}

@media screen and (max-width: 720px) {
  .article-list li .article-info .article-title span {
    padding: 0px 0;
    line-height: 1;
    color: #000;
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.46rem;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .article-info .category {
    top: 0;
    display: inline-block;
    height: 24px;
    margin-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
    background: #000;
    color: #ffe600;
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .article-info .category {
    display: inline-block;
    height: 0.32rem;
    margin-bottom: 0.1rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    background: #000;
    color: #ffe600;
    font-size: 0.18rem;
    font-weight: bold;
    line-height: 0.32rem;
  }
}

@media screen and (max-width: 720px) {
  .article-list li .article-image {
    width: 100%;
    min-height: auto !important;
  }
}

@media screen and (max-width: 720px) {
  .article-list li .article-image img {
    width: 100%;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info {
    display: block;
    width: 89.16%;
    margin: 0 auto;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info {
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article {
    float: left;
    height: 41px;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info .article {
    float: left;
    height: 0.7rem;
    margin-left: 2.5%;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article .member-attribution {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article .article-image {
    float: left;
    min-width: 37px;
    width: 12.54%;
    max-width: 37px;
    margin-right: 10px;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info .article .article-image {
    float: left;
    width: 0.7rem;
    margin-right: 0.2rem;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article .article-image img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info .article .article-image img {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article p {
    float: left;
    line-height: 37px;
    transition: all 0.4s;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info .article p {
    float: left;
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.7rem;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info .article a:hover p {
    color: #fff;
  }
}

@media screen and (min-width: 721px) {
  .article-list li .info time {
    float: right;
    line-height: 37px;
  }
}
@media screen and (max-width: 720px) {
  .article-list li .info time {
    margin-right: 2.5%;
    float: right;
    font-size: 0.2rem;
    line-height: 0.7rem;
  }
}

/*ライター一覧*/
/*ライター一覧*/
@media screen and (min-width: 721px) {
  .writer-list {
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 720px) {
  .writer-list {
    margin-bottom: 0.4rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li {
    width: 31.44%;
    max-width: 332px;
    margin-right: 2.84%;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #000;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li {
    width: 100%;
    height: auto !important;
    margin-bottom: 0.4rem;
    padding: 0.4rem;
    border: 1px solid #000;
    background: #fff;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li:nth-child(3n-2) {
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user {
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user {
    margin-bottom: 0.35rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user .image {
    height: auto;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user .image {
    margin-bottom: 0.5rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user .image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user .image img {
    display: block;
    width: 100%;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user .name p {
    margin-bottom: 20px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user .name p {
    margin-bottom: 0.3rem;
    color: #000;
    font-size: 0.38rem;
    font-weight: bold;
    line-height: 1;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user .name p span.kana {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin-left: 0.5em;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user .name p span.kana {
    color: #000;
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 1;
    margin-left: 0.5em;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .user .roles p {
    color: #000;
    font-size: 16px;
    line-height: 2;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .user .roles p {
    color: #000;
    font-size: 0.26rem;
    line-height: 0.46rem;
    font-weight: bold;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .short {
    margin-bottom: 20px;
    color: #000;
    font-size: 16px;
    line-height: 2;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .short {
    margin-bottom: 0.4rem;
    color: #000;
    font-size: 0.26rem;
    line-height: 0.46rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .link {
    height: 50px;
    line-height: 50px;
    margin-top: auto;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .link {
    width: 3.5rem;
    height: 0.6rem;
    margin: 0 auto;
    line-height: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .link a {
    height: 50px;
    padding: 0;
    background: url(../img/common/link-allow.png) no-repeat #000;
    background-position: right 21px top 15px;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
  }
}
@media screen and (max-width: 720px) {
  .writer-list li .link a {
    height: 0.6rem;
    padding: 0;
    background: url(../img/common/link-allow.png) no-repeat #000;
    background-position: right 0.3rem top 0.19rem;
    background-size: 0.12rem 0.21rem;
    text-align: center;
    font-weight: bold;
    line-height: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  .writer-list li .link a:hover {
    background: url(../img/common/link-allow-hover.png) no-repeat #000;
    color: #ffe600;
    background-position: right 21px top 15px;
  }
}

.custom-nav {
  margin-bottom: 0.4rem;
  font-size: 0;
  text-align: center;
}
@media screen and (min-width: 721px) {
  .custom-nav {
    margin-bottom: 50px;
    vertical-align: top;
  }
}
@media screen and (max-width: 720px) {
  .custom-nav > * {
    vertical-align: top;
  }
}
.custom-nav .current,
.custom-nav .page-numbers {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.1rem;
  font-size: 0.18rem;
  line-height: 0.35rem;
  text-align: center;
}
@media screen and (min-width: 721px) {
  .custom-nav .current,
  .custom-nav .page-numbers {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    font-size: 18px;
    line-height: 50px;
  }
}
.custom-nav .page-numbers {
  color: #000;
  background: #fff;
}
@media screen and (min-width: 721px) {
  .custom-nav .page-numbers {
    font-size: 18px;
  }
  .custom-nav .page-numbers:hover {
    color: #fff;
    background: #000;
    opacity: 1;
  }
}
.custom-nav .current {
  color: #fff;
  background: #000;
}
@media screen and (min-width: 721px) {
  .custom-nav .current {
    font-size: 18px;
  }
}
.custom-nav .prev,
.custom-nav .next {
  display: inline-block;
  width: 0.18rem;
  height: 0.3rem;
  margin-top: 0.1rem;
  text-indent: -9999px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 0.18rem 0.3rem;
  border: 0;
}
.custom-nav .prev::after,
.custom-nav .next::after {
  display: none;
}
@media screen and (min-width: 721px) {
  .custom-nav .prev,
  .custom-nav .next {
    width: 19px;
    height: 50px;
    margin-top: 0;
    font-size: 18px;
    vertical-align: top;
    background-position: center;
    background-size: auto;
  }
}
.custom-nav .prev {
  margin-right: 0.36rem;
  background-image: url("../img/common/prev-page.png");
}
@media screen and (min-width: 721px) {
  .custom-nav .prev {
    margin-right: 37px;
  }
  .custom-nav .prev:hover {
    background-image: url("../img/common/prev-page-white.png");
  }
}
.custom-nav .next {
  margin-left: 0.26rem;
  background-image: url("../img/common/next-page.png");
}
@media screen and (min-width: 721px) {
  .custom-nav .next {
    margin-left: 27px;
  }
  .custom-nav .next:hover {
    background-image: url("../img/common/next-page-white.png");
  }
}

/*フッター*/
/*フッター*/
@media screen and (min-width: 721px) {
  .site-footer {
    clear: both;
    /*margin-top: 50px;*/
  }
}
@media screen and (max-width: 720px) {
  .site-footer {
    clear: both;
    /*margin-top: 50px;*/
  }
}

@media screen and (min-width: 721px) {
  .site-footer .henshu {
    width: 100%;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .henshu {
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .henshu a {
    display: block;
    width: 100%;
    padding-top: 107px;
    padding-bottom: 54px;
    background: url("../img/common/footer-henshubg.png");
    background-position: center;
    background-size: cover;
    border-top: 5px #000 solid;
    border-bottom: 5px #000 solid;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .henshu a {
    display: block;
    width: 100%;
    padding-top: 1.15rem;
    padding-bottom: 0.65rem;
    background: url("../img/common/footer-henshubg-sp.png");
    background-position: center;
    background-size: 16rem;
    background-size: 8rem;
    border-top: 0.05rem #000 solid;
    border-bottom: 0.05rem #000 solid;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .henshu a span {
    display: block;
    width: 388px;
    height: 250px;
    margin: 0 auto;
    background-image: url("../img/common/footer-logo-henshu.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .henshu a span {
    display: block;
    width: 3.88rem;
    height: 2.5rem;
    background-image: url("../img/common/footer-logo-henshu.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .henshu a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .henshu a:hover span {
    background-image: url("../img/common/footer-logo-henshu-hover.png");
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .footer-link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap p {
    margin-bottom: 40px;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .footer-link .wrap p {
    margin-bottom: 0.6rem;
    color: #000;
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 0.36rem;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap ul {
    font-size: 0;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .footer-link .wrap ul {
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap ul li {
    display: inline-block;
    width: 31.44%;
    max-width: 332px;
    margin-right: 2.84%;
    height: 90px;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap ul li a {
    display: block;
    width: 100%;
    height: 90px;
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 90px;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap ul li a:hover {
    color: #000;
    background: #fff;
    opacity: 1;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .footer-link .wrap ul li:last-child {
    display: inline-block !important;
    margin-right: 0;
  }
}

@media screen and (max-width: 720px) {
  .site-footer .footer-link .wrap ul:nth-child(2) li {
    display: block;
    width: 87.5%;
    margin: 0 auto;
    margin-bottom: 0.2rem;
    height: 0.9rem;
  }
}

@media screen and (max-width: 720px) {
  .site-footer .footer-link .wrap ul:nth-child(2) li a {
    display: block;
    width: 100%;
    height: 0.9rem;
    background: #000;
    color: #fff;
    font-size: 0.22rem;
    font-weight: bold;
    text-align: center;
    line-height: 0.9rem;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen {
    width: 100%;
    padding-top: 60px;
    padding-bottom: 40px;
    background: #000;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .ningen {
    width: 100%;
    padding-top: 0.45rem;
    padding-bottom: 0.4rem;
    background: #000;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen a.link-henshu {
    display: block;
    width: 300px;
    height: 77px;
    margin: 0 auto;
    margin-bottom: 45px;
    background-image: url("../img/common/footer-logo-henshu.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.4s all;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .ningen a.link-henshu {
    display: block;
    width: 4.5rem;
    height: 1.155rem;
    margin: 0 auto;
    margin-bottom: 0.4rem;
    background-image: url(../img/common/footer-logo-henshu.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen a.link-henshu:hover {
    background-image: url("../img/common/footer-logo-henshu-hover.png");
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen a.link-ningen {
    display: block;
    width: 98px;
    height: 91px;
    margin: 0 auto;
    margin-bottom: 45px;
    background: url("../img/common/footer-logo.png");
    transition: 0.4s all;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .ningen a.link-ningen {
    display: block;
    width: 1.13rem;
    height: 1.05rem;
    margin: 0 auto;
    margin-bottom: 0.4rem;
    background-image: url(../img/common/footer-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen a.link-ningen:hover {
    background: url("../img/common/footer-logo-hover.png");
  }
}

@media screen and (min-width: 721px) {
  .site-footer .ningen .copyright {
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  .site-footer .ningen .copyright {
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
}

.site-footer a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------
 * top
 */
/* --------------------------------------------------
 * top
 */
@media screen and (min-width: 721px) {
  #top .draft {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 720px) {
  #top .draft {
    width: 100%;
    height: auto;
    margin-bottom: 0.4rem;
  }
}

@media screen and (min-width: 721px) {
  #top .draft::before {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  #top .draft::before {
    display: none;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .wrap {
    width: 100%;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .wrap {
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .wrap::before {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .wrap::before {
    display: none;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide {
    width: 800px !important;
    max-width: 800px;
    margin-right: 30px;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide {
    margin-right: 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-image {
    position: static;
    margin: 0 auto;
    margin-top: 40px;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-image {
    position: static;
    margin: 0 auto;
    margin-top: 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-image img {
    max-width: 800px;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-image img {
    max-width: auto;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info {
    display: table;
    width: 95%;
    margin: 0 auto;
    margin-top: -45px;
    margin-bottom: 30px;
    position: static;
    transition: all 0.4s;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info {
    display: block;
    width: 95%;
    margin: 0 auto;
    /*margin-top: -0.55rem;*/
    margin-top: -0.66rem;
    margin-bottom: 0.26rem;
    position: static;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .title {
    display: inline-block;
    width: 69.74%;
    opacity: 1;
    transition: all 0.4s;
    opacity: 0;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .title {
    display: inline-block;
    display: block;
    width: 100%;
    margin: 0 0 0.1rem;
    opacity: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .title .category {
    display: inline-block;
    height: 32px;
    margin-bottom: 5px;
    padding: 0 26px;
    background: #000;
    color: #ffe600;
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .title .category {
    display: inline-block;
    width: auto;
    height: 0.32rem;
    margin-bottom: 0.1rem;
    padding: 0 0.2rem;
    background: #000;
    color: #ffe600;
    font-size: 0.18rem;
    line-height: 0.32rem;
    font-weight: bold;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author {
    display: inline-block;
    position: relative;
    opacity: 0;
    z-index: 1;
    width: 26.32%;
    margin: 0 0 0 2%;
    font-size: 0;
    overflow: hidden;
    transition: opacity 0.4s;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .author {
    position: relative;
    bottom: 0;
    z-index: 1;
    width: 100%;
    font-size: 0;
    overflow: hidden;
    opacity: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author > a,
  #top .draft .slider .slick-slide .article-info .author > .author-attribution {
    position: relative;
    z-index: 5;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author .author-image {
    float: left;
    width: 56px;
    height: auto;
    margin-right: 16px;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .author .author-image {
    float: left;
    width: 0.7rem;
    height: auto;
    margin-right: 0.2rem;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author .author-image a:hover {
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author .author-image img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .author .author-image img {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide .article-info .author .author-name {
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 56px;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide .article-info .author .author-name {
    float: left;
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.7rem;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide.slick-current.slick-active.slick-open .title {
    opacity: 1;
    transition: opacity 1s;
    transition-delay: 300ms;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide.slick-current.slick-active.slick-open .title {
    opacity: 1;
    transition: opacity 1s;
    transition-delay: 300ms;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slider .slick-slide.slick-current.slick-active.slick-open .author {
    opacity: 1;
    transition: opacity 1s;
    transition-delay: 600ms;
  }
}
@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide.slick-current.slick-active.slick-open .author {
    opacity: 1;
    transition: opacity 1s;
    transition-delay: 600ms;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slick-arrow {
    width: 60px;
    height: 60px;
    text-indent: -9999px;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slick-prev {
    background: url("../img/top/slide-prev.png") no-repeat;
    top: 270px;
    left: 0;
    z-index: 1;
  }
}

@media screen and (min-width: 721px) {
  #top .draft .slick-next {
    background: url("../img/top/slide-next.png") no-repeat;
    top: 270px;
    right: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul {
    margin-bottom: 30px;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li {
    display: inline-block;
    width: 48.58%;
    overflow: hidden;
    vertical-align: top;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li:first-child {
    margin-right: 2.84%;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-image {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-info {
    display: table;
    width: 95%;
    margin: 0 auto;
    margin-top: -38px;
    position: static;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-info .title {
    display: inline-block;
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-info .title .category {
    display: inline-block;
    height: 24px;
    padding: 0 20px;
    background: #000;
    margin-bottom: 5px;
    color: #ffe600;
    font-size: 12px;
    line-height: 24px;
    font-weight: bold;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-info .title .article-title {
    background: url(../img/top/recommended-title-bg.png);
    background-size: 34px;
    background-position: 0px 0px;
    margin-bottom: 5px;
    padding: 0 15px;
    font-size: 18px;
    line-height: 34px;
    font-style: italic;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .article-info .title .article-title .item {
    padding: 0px 0;
    line-height: 1;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author {
    margin-left: 2.5%;
    float: left;
    font-size: 0;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author a,
  #top .recommended.wrap ul li .author .author-attribution {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author .author-image {
    float: left;
    width: 37px;
    height: auto;
    margin-right: 10px;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author .author-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author .author-name {
    float: left;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .author:hover .author-name {
    color: #fff;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .time {
    float: right;
    font-size: 0;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li .time time {
    font-size: 12px;
    line-height: 37px;
  }
}

@media screen and (min-width: 721px) {
  #top .hentonen-banner {
    display: block;
    width: 1056px;
    margin: 80px auto;
  }
}

@media screen and (min-width: 721px) {
  #top .hentonen-banner img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}

@media screen and (max-width: 720px) {
  #top .draft .slider .slick-arrow {
    width: 0.6rem;
    height: 0.6rem;
    text-indent: -9999px;
  }
}

@media screen and (max-width: 720px) {
  #top .draft .slider .slick-prev {
    background: url("../img/top/slide-prev.png") no-repeat;
    background-size: contain;
    top: 2.2rem;
    left: 0;
    z-index: 1;
  }
}

@media screen and (max-width: 720px) {
  #top .draft .slider .slick-next {
    background: url("../img/top/slide-next.png") no-repeat;
    background-size: contain;
    top: 2.2rem;
    right: 0;
  }
}

@media screen and (max-width: 720px) {
  #top .event.wrap {
    display: table;
    height: 1rem;
    margin-bottom: 0.4rem;
    background: #fff;
    border: 1px solid #000;
    font-size: 0;
  }
}

@media screen and (max-width: 720px) {
  #top .event.wrap > p {
    display: inline-block;
  }
}

@media screen and (max-width: 720px) {
  #top .event.wrap .title {
    display: table-cell;
    width: 2rem;
    height: 1rem;
    background: #000;
    color: #ffe600;
    font-size: 0.22rem;
    line-height: 1rem;
    text-align: center;
  }
}

@media screen and (max-width: 720px) {
  #top .event.wrap .item {
    display: table-cell;
    vertical-align: middle;
    width: calc(100% - 2rem);
    height: 1rem;
    padding-left: 0.32rem;
    font-size: 0.22rem;
    line-height: 1.55;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap,
  #top .latest.wrap {
    overflow: hidden;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul,
  #top .latest.wrap ul {
    font-size: 0;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li,
  #top .latest.wrap ul li {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.32rem;
    overflow: hidden;
    vertical-align: top;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li:first-child,
  #top .latest.wrap ul li:first-child {
    margin-right: 2.84%;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-image,
  #top .latest.wrap ul li .article-image {
    width: 100%;
    min-height: auto !important;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-image img,
  #top .latest.wrap ul li .article-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-info,
  #top .latest.wrap ul li .article-info {
    display: table;
    width: 95%;
    margin: 0 auto;
    margin-top: -0.66rem;
    position: static;
    overflow: hidden;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-info .title,
  #top .latest.wrap ul li .article-info .title {
    display: inline-block;
    width: 100%;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-info .title .category,
  #top .latest.wrap ul li .article-info .title .category {
    display: inline-block;
    height: 0.32rem;
    padding: 0 0.2rem;
    background: #000;
    margin-bottom: 0.05rem;
    color: #ffe600;
    font-size: 0.18rem;
    line-height: 0.32rem;
    font-weight: bold;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-info .title .article-title,
  #top .latest.wrap ul li .article-info .title .article-title {
    background: url("../img/top/recommended-title-bg.png");
    background-size: 0.46rem;
    margin-bottom: 0.05rem;
    padding: 0 0.15rem;
    font-size: 0.32rem;
    line-height: 0.34rem;
    font-style: italic;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .article-info .title .article-title .item,
  #top .latest.wrap ul li .article-info .title .article-title .item {
    padding: 0px 0;
    line-height: 1;
    color: #000;
    font-size: 0.32rem;
    font-weight: bold;
    line-height: 0.46rem;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .author,
  #top .latest.wrap ul li .author {
    float: left;
    margin-left: 2.5%;
    font-size: 0;
    overflow: hidden;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .author .author-image,
  #top .latest.wrap ul li .author .author-image {
    float: left;
    width: 0.7rem;
    height: auto;
    margin-right: 10px;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .author .author-image img,
  #top .latest.wrap ul li .author .author-image img {
    width: 100%;
    height: auto;
    border: 1px solid #000;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .author .author-name,
  #top .latest.wrap ul li .author .author-name {
    float: left;
    font-size: 0.2rem;
    font-weight: bold;
    line-height: 0.7rem;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .time,
  #top .latest.wrap ul li .time {
    float: right;
    font-size: 0;
    margin-right: 2.5%;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap ul li .time time,
  #top .latest.wrap ul li .time time {
    font-size: 0.2rem;
    line-height: 0.7rem;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap span.link,
  #top .latest.wrap span.link {
    display: block;
    width: 5.5rem;
    height: 1rem;
    margin: 0 auto;
    margin-bottom: 0.6rem;
  }
}

@media screen and (max-width: 720px) {
  #top .recommended.wrap span.link a,
  #top .latest.wrap span.link a {
    width: 5.5rem;
    height: 1rem;
    padding: 0;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  #about .draft {
    height: 450px;
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 720px) {
  #about .draft {
    height: 3.51rem;
    margin-bottom: 0.85rem;
  }
}
@media screen and (min-width: 721px) {
  #about .draft .mainvisual {
    width: 98%;
    max-width: 1056px;
    height: auto;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 50px;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  #about .draft .mainvisual {
    width: 88.89%;
    height: auto;
    margin: 0 auto;
    margin-top: 0.3rem;
    margin-bottom: 0px;
    text-align: center;
  }
}
#about .draft .mainvisual img {
  width: 100%;
  height: auto;
}
#about .wrap.about > section {
  width: 100%;
  margin: 0 auto;
}
#about .wrap.about > section > section {
  width: 86.17%;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (min-width: 721px) {
  #about .wrap.about h3 {
    height: 80px;
    margin-bottom: 40px;
    padding-left: 30px;
    color: #fff;
    font-size: 30px;
    font-style: italic;
    line-height: 80px;
    background: #000;
  }
}
@media screen and (max-width: 720px) {
  #about .wrap.about h3 {
    height: 0.8rem;
    margin-bottom: 0.3rem;
    padding-left: 0.26rem;
    color: #fff;
    font-size: 0.28rem;
    font-style: italic;
    line-height: 0.8rem;
    background: #000;
  }
}
@media screen and (min-width: 721px) {
  #about .wrap.about .headline {
    padding-left: 5px;
    font-size: 22px;
    font-style: normal;
    background: none;
  }
}
@media screen and (max-width: 720px) {
  #about .wrap.about .headline {
    position: relative;
    padding-left: 0.32rem;
    font-size: 0.26rem;
    font-style: normal;
    background: none;
  }
}
@media screen and (min-width: 721px) {
  #about .wrap.about .headline::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background: #000;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media screen and (max-width: 720px) {
  #about .wrap.about .headline::before {
    position: absolute;
    top: 0.12rem;
    left: 0.05rem;
    content: "";
    display: inline-block;
    width: 0.17rem;
    height: 0.17rem;
    background: #000;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media screen and (min-width: 721px) {
  #about .wrap.about p {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 2;
  }
}
@media screen and (max-width: 720px) {
  #about .wrap.about p {
    margin-bottom: 0.5rem;
    font-size: 0.26rem;
    line-height: 2;
  }
}
@media screen and (min-width: 721px) {
  #about .wrap.about .discription {
    width: 80.49%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 720px) {
  #about .wrap.about .discription {
    width: 87.5%;
    margin: 0 auto;
  }
}
#about .wrap.about .discription .chief {
  text-align: right;
}

/* --------------------------------------------------
 * article
 */
@media screen and (min-width: 721px) {
  #article .draft {
    height: 164px;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 720px) {
  #article .draft {
    height: 1.28rem;
  }
}
@media screen and (min-width: 721px) {
  #article .wrap.article-link {
    margin-top: -60px;
  }
}
@media screen and (max-width: 720px) {
  #article .wrap.article-link {
    margin-top: -0.6rem;
  }
}
@media screen and (min-width: 721px) {
  #article .wrap.article-link .article-list {
    margin-bottom: 40px;
    overflow: hidden;
    font-size: 0;
  }
}

/* --------------------------------------------------
 * article-detail
 */
@media screen and (max-width: 720px) {
  #tinymce {
    /*display: none;*/
  }
}

/* --------------------------------------------------
 * article-detail
 */
@media screen and (min-width: 721px) {
  #tinymce .link.finished {
    display: block;
    position: relative;
    width: 60.44%;
    height: 60px;
    margin: 0 auto;
    margin-top: 50px;
    background: #000;
    background-size: 20px 18px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
    font-size: 20px;
    line-height: 60px;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .link.finished {
    overflow: hidden;
    display: block;
    height: 1rem;
    margin-top: 0.5rem;
    position: relative;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    font-size: 0.24rem;
    font-weight: bold;
  }
}

@media screen and (min-width: 721px) {
  #tinymce .link.continued {
    display: block;
    position: relative;
    width: 60.44%;
    margin: 0 auto;
    margin-top: 50px;
    background: #000;
    background-size: 20px 18px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .link.continued {
    overflow: hidden;
    display: block;
    height: 1rem;
    margin-top: 0.5rem;
    position: relative;
    background: #000;
    color: #fff;
    font-size: 0.24rem;
    text-align: center;
    line-height: 1rem;
  }
}

@media screen and (min-width: 721px) {
  #tinymce .link.continued::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% + 70px);
    width: 20px;
    height: 18px;
    background: url("../img/common/site.png") no-repeat;
    background-size: 20px 18px;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .link.continued::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.09rem);
    left: calc(50% + 0.7rem);
    width: 0.22rem;
    height: 0.18rem;
    background: url("../img/common/site.png") no-repeat;
    background-size: 0.2rem 0.18rem;
  }
}

@media screen and (min-width: 721px) {
  #tinymce .link.continued:hover::after {
    content: "";
    display: block;
    top: calc(50% - 9px);
    left: calc(50% + 70px);
    width: 20px;
    height: 18px;
    background: url("../img/common/site-hover.png") no-repeat;
    background-size: 20px 18px;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #tinymce .link.continued a {
    display: block;
    position: relative;
    background: #000;
    padding: 0;
    color: #fff;
    text-align: center;
  }
}
@media screen and (max-width: 720px) {
  #tinymce .link.continued a {
    position: relative;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
}

@media screen and (min-width: 721px) {
  #tinymce .link.continued a:hover {
    color: #ffe600;
    background: #000;
  }
}

@media screen and (max-width: 720px) {
  #tinymce .link.continued a::after {
    content: "";
    display: block;
    top: calc(50% - 0.09rem);
    left: calc(50% + 0.7rem);
    width: 0.22rem;
    height: 0.18rem;
    background: url("../img/common/site.png") no-repeat;
    background-size: 0.2rem 0.18rem;
  }
}

/* --------------------------------------------------
 * author
 */
/* --------------------------------------------------
 * author
 */
@media screen and (min-width: 721px) {
  #author .draft {
    margin-bottom: 0;
    padding: 40px 0 78px;
  }
}
@media screen and (max-width: 720px) {
  #author .draft {
    margin-bottom: 0;
    padding: 0.3rem 0 0.78rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap {
    position: relative;
    padding: 60px 50px 50px;
    overflow: visible;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap {
    padding: 0.4rem 0.4rem 0.4rem;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap > .author-profile {
    float: left;
    width: 47.36%;
    /*overflow: hidden;*/
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .athor-image {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .athor-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 0.6rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .athor-image img {
    border: 1px solid #000;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .athor-image img {
    border: 1px solid #000;
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info {
    float: right;
    width: 47.36%;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info {
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info::after {
    content: "";
    clear: both;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block {
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .name {
    float: left;
    position: relative;
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .name > * {
    display: inline-block;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .name h2 {
    padding-left: 30px;
    color: #000;
    font-size: 26px;
    line-height: 60px;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .name h2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: #000;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .name .author-kana {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    line-height: 60px;
    margin-left: 0.5em;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .link {
    position: absolute;
    top: -24px;
    right: 63px;
    display: block !important;
    width: 200px;
    height: 50px;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .link a {
    display: block;
    width: 200px;
    height: 50px;
    background: url("../img/common/link-allow.png") #000 no-repeat;
    background-position: right 21px top 15px;
    color: #fff;
    line-height: 50px;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .block .link a:hover {
    background: url("../img/common/link-allow-hover.png") #000 no-repeat;
    background-position: right 21px top 15px;
    color: #ffe600;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item {
    padding-left: 3%;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .name {
    display: flex;
    margin-bottom: 0.4rem;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .name > * {
    display: inline-block;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .name h2 {
    position: relative;
    padding-left: 0.3rem;
    color: #000;
    font-size: 0.38rem;
    line-height: 0.72rem;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .name h2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.1rem;
    height: 100%;
    background: #000;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .name .author-kana {
    color: #000;
    font-size: 0.24rem;
    font-weight: bold;
    line-height: 0.72rem;
    margin-left: 0.5em;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .link {
    position: absolute;
    top: 0.05rem;
    right: 0.6rem;
    display: block !important;
    width: 2.3rem;
    height: 0.52rem;
    text-align: center;
  }
}

@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .link a {
    display: block;
    width: 2.3rem;
    height: 0.52rem;
    padding: 0;
    background: url("../img/common/link-allow.png") #000 no-repeat;
    background-position: right 0.2rem center;
    background-size: 0.13rem auto;
    text-align: center;
    color: #fff;
    font-size: 0.22rem;
    line-height: 0.52rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .author-web {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .author-web {
    margin-bottom: 0.4rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .author-web .weblink {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .author-web .weblink {
    display: inline-block;
    width: 0.52rem;
    height: 0.52rem;
    margin-right: 0.3rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 20px;
    margin-bottom: 20px;
    background: #fff;
    font-size: 20px;
    line-height: 1;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 0.26rem;
    margin-bottom: 0.33rem;
    background: #fff;
    font-size: 0.26rem;
    line-height: 1;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title span {
    position: relative;
    z-index: 1;
    background: #fff;
    font-size: 20px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title span {
    position: relative;
    z-index: 1;
    background: #fff;
    font-size: 0.26rem;
    padding-right: 0.2rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background: #000;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile h3.item-title::before {
    content: "";
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    margin-right: 0.1rem;
    background: #000;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile p {
    margin-bottom: 1.5em;
    font-size: 16px;
    line-height: 2;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile p {
    margin-bottom: 0.5rem;
    font-size: 0.26rem;
    line-height: 0.46rem;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile.roles p {
    margin-bottom: 1.5em;
    font-size: 14px;
    line-height: 2;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile.roles p {
    margin-bottom: 0.35rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    font-weight: bold;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .author-info .item .profile a {
    color: #000;
    text-decoration: underline;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .author-info .item .profile a {
    color: #000;
    text-decoration: underline;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .link {
    clear: both;
    width: 64.74%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .link {
    height: 1.4rem;
    width: 100%;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .link a {
    padding: 0;
    background: url(../img/common/link-allow-black.png) no-repeat #ffe600;
    background-position: right 21px top 20px;
    color: #000;
    text-align: center;
    font-weight: bold;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .link a {
    height: 1.3rem;
    padding: 0.2rem 0 0 1.1rem;
    background: url(../img/common/link-allow-black.png) no-repeat #ffe600;
    background-position: right 21px top 0.58rem;
    color: #000;
    font-size: 0.3rem;
    font-weight: bold;
    line-height: 0.38rem;
    text-align: left;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .link a:hover {
    background: url(../img/common/link-allow.png) no-repeat #000;
    background-position: right 21px top 20px;
    color: #fff;
    text-align: center;
  }
}

@media screen and (min-width: 721px) {
  #author .draft .contents.wrap .link .link__prepend {
    color: inherit;
  }
}
@media screen and (max-width: 720px) {
  #author .draft .contents.wrap .link .link__prepend {
    color: inherit;
    font-size: 0.24rem;
  }
}

@media screen and (min-width: 721px) {
  #author .wrap.article-link {
    margin-top: -44px;
  }
}
@media screen and (max-width: 720px) {
  #author .wrap.article-link {
    margin-top: -0.44rem;
  }
}

@media screen and (min-width: 721px) {
  #notfound .contents {
    padding-top: 110px;
  }
}
@media screen and (max-width: 720px) {
  #notfound .contents {
    padding-top: 1.1rem;
  }
}

#contact .draft {
  margin-bottom: 0;
}
@media screen and (min-width: 721px) {
  #contact .draft {
    height: 164px;
  }
}
@media screen and (max-width: 720px) {
  #contact .draft {
    height: 1.28rem;
  }
}
@media screen and (min-width: 721px) {
  #contact .contactform {
    padding-bottom: 100px;
    margin-top: -60px;
  }
}
@media screen and (max-width: 720px) {
  #contact .contactform {
    padding-bottom: 1.2rem;
    margin-top: -0.6rem;
  }
}
#contact .contactform h1,
#contact .contactform h2 {
  width: 100%;
  color: #fff;
  background: #000;
}
@media screen and (min-width: 721px) {
  #contact .contactform h1,
  #contact .contactform h2 {
    height: 80px;
    padding-left: 20px;
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 80px;
  }
}
@media screen and (max-width: 720px) {
  #contact .contactform h1,
  #contact .contactform h2 {
    height: 0.8rem;
    padding-left: 0.2rem;
    margin-bottom: 0.4rem;
    font-size: 0.28rem;
    line-height: 0.8rem;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .wrap {
    width: 90.84%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .tablet {
    display: inline !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .wrap {
    width: 90.84%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .wrap .header-sns {
    display: none;
  }
}

/*背景[原稿用紙]ブロック*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info {
    left: 1.9%;
    width: 96.21%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info .info .tag {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info .info time {
    float: left;
  }
}

/*ハンバーガーボタン*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn {
    display: block !important;
    position: relative;
    z-index: 101;
    float: right;
    width: 11.56%;
    max-width: 74px;
    height: 74%;
    max-height: 74px;
    margin-top: 5px;
    background: #000;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 51.35%;
    height: 4px;
    background: #fff;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span:nth-child(2) {
    top: 35px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span:last-child {
    top: 47px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:first-child {
    transform: translateY(12px) translateX(-50%) rotate(45deg);
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:nth-child(2) {
    opacity: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:last-child {
    transform: translateY(-12px) translateX(-50%) rotate(-45deg);
  }
}

/*ナビメニュー*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header {
    height: 94px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav {
    display: none;
    position: absolute;
    top: 0;
    right: -5%;
    z-index: 100;
    width: 96.72%;
    height: 100vh;
    background: #000;
    opacity: 0.85;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul {
    height: auto;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li {
    display: block;
    width: 96.78%;
    height: 100px;
    margin: 0 auto;
    background: url("../img/common/navi-arrow-sp.png") no-repeat;
    background-position: right 60px top 50%;
    border-bottom: 2px solid #4d4d4d;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li:first-child {
    height: 90px;
    background: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li a {
    display: block;
    width: 100%;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) {
    display: block !important;
    width: 70px;
    margin: 0 auto;
    padding-top: 40px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li {
    width: 70px;
    background: initial;
    border-bottom: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li:nth-child(1) {
    float: left;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li a {
    padding-left: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li a img {
    width: 100%;
    height: auto;
  }
}

/*コンテンツ*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents {
    padding: 30px 20px 60px;
  }
}

/*下部記者エリア*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block .author-image {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block .author-plofile {
    width: 80%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block .author-plofile .name .author-name {
    line-height: 1.75;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block .author-link {
    width: calc(80% - 30px);
    margin-top: 14px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block .author-link .link {
    bottom: auto;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap > .author.bottom .author-block > .author-discription {
    display: block !important;
    clear: both;
    width: 100%;
    font-size: 16px;
    line-height: 2;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .wrap {
    width: 90.84%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .tablet {
    display: inline !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .wrap {
    width: 90.84%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .wrap .header-sns {
    display: none;
  }
}

/*背景[原稿用紙]ブロック*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info {
    top: -143px;
    left: 1.9%;
    width: 96.21%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info .info .tag {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .draft .wrap .article-info .info time {
    float: left;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .quadrupleline {
    font-size: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .article-info.wrap {
    width: 100%;
    width: calc(90.84% - 40px);
  }
}

/*ハンバーガーボタン*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn {
    display: block !important;
    position: relative;
    z-index: 101;
    float: right;
    width: 11.56%;
    max-width: 74px;
    height: 74%;
    max-height: 74px;
    margin-top: 5px;
    background: #000;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span {
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 51.35%;
    height: 4px;
    background: #fff;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span:nth-child(2) {
    top: 35px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn span:last-child {
    top: 47px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:first-child {
    transform: translateY(12px) translateX(-50%) rotate(45deg);
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:nth-child(2) {
    opacity: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .btn.active span:last-child {
    transform: translateY(-12px) translateX(-50%) rotate(-45deg);
  }
}

/*ナビメニュー*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header {
    height: 94px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav {
    display: none;
    position: absolute;
    top: 0;
    right: -7.5%;
    z-index: 100;
    width: 96.72%;
    height: 100vh;
    background: #000;
    opacity: 0.85;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul {
    height: auto;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li {
    display: block;
    width: 96.78%;
    height: 100px;
    margin: 0 auto;
    background: url("../img/common/navi-arrow-sp.png") no-repeat;
    background-position: right 60px top 50%;
    border-bottom: 2px solid #4d4d4d;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li:first-child {
    height: 90px;
    background: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul li a {
    display: block;
    width: 100%;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) {
    display: block !important;
    width: 160px;
    margin: 0 auto;
    padding-top: 40px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li {
    width: 70px;
    background: initial;
    border-bottom: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li:nth-child(1) {
    float: left;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li:nth-child(2) {
    float: right;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li a {
    padding-left: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .header .global-nav ul:nth-child(2) li a img {
    width: 100%;
    height: auto;
  }
}

/*コンテンツ共通*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents {
    padding: 30px 20px 60px;
  }
}

/*記事エリア*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .article.contents {
    margin-top: -38px;
  }
}

/*下部記者エリア*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-image {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile {
    width: 80%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile.nophoto {
    width: 80%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile.nophoto + .author-link {
    width: 100%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-plofile .name .author-name {
    line-height: 1.75;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link {
    width: 80%;
    margin-top: 14px;
    margin-left: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block .author-link .link {
    display: block;
    position: relative;
    bottom: auto;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .contents.wrap.author-block > .author.bottom .author-block > .author-discription {
    display: block !important;
    clear: both;
    width: 100%;
    font-size: 16px;
    line-height: 2;
  }
}

/**/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  .site-footer .footer-link .wrap ul li {
    display: inline-block !important;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  .site-footer .footer-link .wrap ul li:last-child {
    display: inline-block !important;
  }
}

/* --------------------------------------------------
  * top
  */
/*#top .draft .slider .slick-slide {
    width: 5%!important;
  }*/
@media screen and (min-width: 721px) and (max-width: 1060px) {
  #top .draft .slider .slick-slide .article-image img {
    margin: 0 auto;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #top .draft .slider .slick-slide .article-info {
    display: block;
    width: 83.33%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #top .hentonen-banner {
    width: 90.84%;
  }
}

/* --------------------------------------------------
  * author
  */
@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap > .author-profile {
    float: none;
    width: 100%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .athor-image {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .author-info {
    float: none;
    width: 100%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .author-info > .item {
    padding-left: 0;
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .author-web {
    float: none;
    width: 100%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .author-web .weblink:last-child {
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #author .draft .contents.wrap .link {
    float: none;
    width: 100%;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #about .draft {
    height: 428px;
  }
}

/*背景[原稿用紙]ブロック*/
@media screen and (min-width: 721px) and (max-width: 800px) {
  .draft .wrap .article-info {
    top: -265px;
  }
}

/*記事リスト*/
@media screen and (min-width: 721px) and (max-width: 800px) {
  .article-list li a .article-info .info time {
    float: left;
  }
}

/*ライター一覧*/
@media screen and (min-width: 721px) and (max-width: 800px) {
  .writer-list li {
    float: none;
    width: 100%;
    max-width: initial;
    margin-right: 0;
    margin-bottom: 30px;
  }
}

@media screen and (min-width: 721px) and (max-width: 800px) {
  #about .draft {
    height: 320px;
  }
}

@media screen and (max-width: 720px) {
  #notfound .contents > .wrap h2 {
    font-size: 0.28rem;
  }
}
@media screen and (max-width: 720px) {
  #notfound .contents > .wrap p {
    font-size: 0.24rem;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide:hover .article-info .title .category {
    background: #ffe600;
    color: #000;
    transition: background 0.4s, color 0.4s;
  }
}
@media screen and (max-width: 720px) {
  #top .slider .slick-slide:hover .article-info .title .category {
    background: #ffe600;
    color: #000;
    transition: background 0.4s, color 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide .article-info .title .article-title {
    opacity: 0;
    background: url(../img/top/slide-title-bg-sp.png);
    background-size: 57px;
    margin-bottom: 5px;
    padding: 0 20px;
    font-size: 28px;
    line-height: 57px;
  }
}
@media screen and (max-width: 720px) {
  #top .slider .slick-slide .article-info .title .article-title {
    position: relative;
    z-index: 0;
    opacity: 0;
    background: url(../img/top/slide-title-bg-sp.png);
    background-size: 0.59rem;
    margin-bottom: 0.05rem;
    padding: 0 0.2rem;
    font-size: 0.28rem;
    line-height: 0.57rem;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide.slick-current:hover .article-info .title .article-title {
    background: url(../img/top/recommended-title-bg-hover.png);
    background-size: 57px;
    opacity: 1;
    transition: opacity 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide .article-info .title .article-title span {
    color: #000;
    font-style: italic;
    font-size: 28px;
    font-weight: bold;
    line-height: 26px;
    transition: all 0.4s;
  }
}
@media screen and (max-width: 720px) {
  #top .slider .slick-slide .article-info .title .article-title span {
    color: #000;
    font-style: italic;
    font-size: 0.28rem;
    font-weight: bold;
    line-height: 0.26rem;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide:hover .article-info .title .article-title span {
    color: #ffe600;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide.slick-current.slick-open .article-info .title .article-title {
    opacity: 1;
    overflow: hidden;
  }
}
@media screen and (max-width: 720px) {
  #top .slider .slick-slide.slick-current.slick-open .article-info .title .article-title {
    opacity: 1;
  }
}

@media screen and (min-width: 721px) {
  #top .slider .slick-slide.slick-current:hover .article-info .title .article-title {
    transition: background 0.4s, color 0.4s;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li a:hover .article-info .title .category {
    opacity: 1;
    background: #ffe600;
    color: #000;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li a:hover .article-info .title .article-title {
    background: url("../img/top/recommended-title-bg-hover.png");
    background-size: 36px;
    opacity: 1;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  .latest.wrap ul li a:hover .article-info .title .article-title .item {
    opacity: 1;
    transition: 0.4s all;
    opacity: 1;
    color: #ffe600;
    transition: 0.4s all;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li a:hover .article-info .title .category {
    background: #ffe600;
    color: #000;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li a:hover .article-info .title .article-title {
    background: url("../img/top/recommended-title-bg-hover.png");
    background-size: 36px;
  }
}

@media screen and (min-width: 721px) {
  #top .recommended.wrap ul li a:hover .article-info .title .article-title .item {
    color: #ffe600;
  }
}

@media screen and (min-width: 721px) {
  .article-list li a:hover .article-info .category {
    background: #ffe600;
    color: #000;
    transition: background 0.4s, color 0.4s;
  }
}

@media screen and (min-width: 721px) {
  .article-list li a:hover .article-info .article-title {
    background: url(../img/top/recommended-title-bg-hover.png);
    background-size: 36px;
    opacity: 1;
    transition: all 0.4s;
  }
}

@media screen and (min-width: 721px) {
  .article-list li a:hover .article-info .article-title span {
    color: #ffe600;
    opacity: 1;
    transition: all 0.4s;
  }
}

@media screen and (max-width: 720px) {
  #top .hentonen-banner {
    display: block;
    width: 90.84%;
    margin: 0.5em auto 1em;
  }
}

@media screen and (max-width: 720px) {
  #top .hentonen-banner img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}

#top .draft .slick-arrow:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

@media screen and (min-width: 1061px) {
  #top .draft .slick-prev {
    left: calc((100vw - 800px) / 2 - 57px);
  }
}

@media screen and (min-width: 1061px) {
  #top .draft .slick-next {
    right: calc((100vw - 800px) / 2 - 58px);
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #top .draft .slider .slick-slide {
    min-width: 100vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 1060px) {
  #top .slick-slide .article-image img {
    width: 91.67vw;
  }
}

@media screen and (max-width: 720px) {
  #top .draft .slider .slick-slide {
    width: 91.67vw;
    max-width: 91.67vw;
  }
}

#top #event_news.event.wrap {
  display: grid;
  height: auto;
  align-items: stretch;
}
@media screen and (min-width: 721px) {
  #top #event_news.event.wrap {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}
@media screen and (max-width: 720px) {
  #top #event_news.event.wrap {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
}

#top #event_news.event.wrap .title {
  display: flex;
  width: auto;
  height: auto;
  align-items: center;
  justify-content: center;
  line-height: 1.55;
}

#top #event_news.event.wrap .item {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}

#top #event_news .news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#top #event_news .news-list li,
#top #event_news .news-empty {
  border-bottom: 1px solid #000;
}
@media screen and (min-width: 721px) {
  #top #event_news .news-list li,
  #top #event_news .news-empty {
    min-height: 80px;
    padding: 22px 38px;
  }
}
@media screen and (max-width: 720px) {
  #top #event_news .news-list li,
  #top #event_news .news-empty {
    min-height: 1rem;
    padding: 0.24rem 0.32rem;
  }
}

#top #event_news .news-list li:last-child,
#top #event_news .news-empty {
  border-bottom: 0;
}

#top #event_news .news-list p,
#top #event_news .news-empty {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}

#top #event_news .news-list span,
#top #event_news .news-empty span {
  display: block;
}
@media screen and (min-width: 721px) {
  #top #event_news .news-list span,
  #top #event_news .news-empty span {
    font-size: 20px;
    line-height: 1.55;
  }
}
@media screen and (max-width: 720px) {
  #top #event_news .news-list span,
  #top #event_news .news-empty span {
    font-size: 0.22rem;
    line-height: 1.55;
  }
}

.member-external-links .member-external-link {
  overflow-wrap: anywhere;
}

.writer-list .member-card-name {
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#author .draft .member-name {
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media screen and (min-width: 721px) {
  .single-podcast #main {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 720px) {
  .single-podcast #main {
    margin-bottom: 0.3rem;
  }
}

/* stylelint-disable-next-line selector-class-pattern -- SSP generates this class. */
@media screen and (min-width: 721px) {
  .single-podcast #tinymce > .podcast_player {
    width: 93.41%;
    margin: 25px auto 50px;
  }
}
@media screen and (max-width: 720px) {
  .single-podcast #tinymce > .podcast_player {
    width: 93.41%;
    /* stylelint-disable-next-line @stylistic/number-leading-zero -- Prettier requires the leading zero. */
    margin: 0 auto 0.5rem;
  }
}

.tax-series .wrap.article-link h2 {
  height: auto;
  min-height: 80px;
  padding: 18px 30px;
  line-height: 1.45;
}
@media screen and (max-width: 720px) {
  .tax-series .wrap.article-link h2 {
    min-height: 40px;
    padding: 10px;
  }
}/*# sourceMappingURL=legacy-responsive.css.map */