@charset "utf-8";

/*=== メインレイアウト ===*/
.main {
  padding-bottom: 20px;
}
.main-inner {
  margin-bottom: 20px;
}
.main-container {
  background-size: 8px 8px;
}
.main-column {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}
.main-body {
  flex-grow: 1;
  width: calc(100% - 320px);
}
.main-body > *:first-child {
  margin-top: 0;
}
.main-cont {
  margin-top: 20px;
}
.main-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.main-column .main-section {
  padding: 0;
}
.main-side {
  flex-shrink: 0;
  width: 300px;
  margin-left: 20px;
}
.main-ttl {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
}
.article {
  margin-top: 5px;
  padding: 30px 40px;
  border: 1px solid #e3e3e3;
  background-color: #fff;
}
.sideCont {
  border: 1px solid #e3e3e3;
  background-color: #fff;
}


/*=== メインビジュアル ===*/
.mainvisual-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}


/*=== 最近見たページ ===*/
.history-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.history-ttl {
  flex-shrink: 0;
  position: relative;
  width: 74px;
  height: 74px;
  margin: -5px 10px 0 0;
  padding: 20px 0 0 5px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  background-color: #a18871;
  border-radius: 50%;
}
.history-ttl::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 43px;
  width: 31px;
  height: 31px;
  background: url(../images/history_ico_001.png) no-repeat 0 0 / 100% auto;
}
.history-list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  padding: 10px 0;
}
.history-item {
  width: 100%;
  max-width: calc((100% - (10px * 3)) / 3);
  margin-left: 10px;
}
a.history-link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  color: #232b35;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  background-color: #fff;
}
a.history-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  transform: rotate(90deg);
}
a.history-link:visited {
  color: #232b35;
}
a.history-link:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*=== 習得できること ===*/
.learn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
}
.learn-ttl {
  width: 30%;
  margin-right: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}
.learn-list {
  width: 70%;
}
.learn-item {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  line-height: 1.4;
}
.learn-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}


/*=== 最新記事 ===*/
.latest {
  margin-top: 20px;
  padding: 20px;
}
.latest-inner {
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 15%);
}
a.latest-link {
  display: flex;
  position: relative;
  padding: 20px 20px 20px 70px;
  color: #232b35;
  text-decoration: none;
}
a.latest-link:visited {
  color: #232b35;
}
a.latest-link:hover {
  text-decoration: none;
  opacity: 0.7;
}
a.latest-link::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 52px;
  height: 52px;
  background-color: #c8331f;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  transform: rotate(-90deg);
}
a.latest-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  transform: rotate(90deg);
}
.latest-new {
  position: absolute;
  top: 9px;
  left: 2px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  transform: rotate(-45deg);
}
.latest-head {
  margin-right: 10px;
  font-weight: bold;
  line-height: 1;
}
.latest-case {
  font-size: 14px;
}
.latest-number {
  font-size: 26px;
}
.latest-ttl {
  font-weight: bold;
  font-size: 22px;
  line-height: 1.2;
}
.latest-category {
  min-height: 26px;
  margin-top: 5px;
  color: #666;
  font-size: 14px;
}
.latest-label {
  margin-right: 8px;
  padding: 2px 10px 4px;
  color: #fff;
  font-weight: bold;
}


/*=== ランキング ===*/
.ranking {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  color: #666;
  font-weight: bold;
}
.ranking-head {
  flex-shrink: 0;
  padding: 2px 0;
}
.ranking-list {
  display: flex;
  flex-wrap: wrap;
}
.ranking-item {
  position: relative;
  margin-left: 10px;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-size: 35px;
}
.ranking-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 25px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.ranking-item:first-child::before {
  background-image: url(../images/ranking_ico_001.png);
}
.ranking-item:nth-child(2)::before {
  background-image: url(../images/ranking_ico_002.png);
}
.ranking-item:nth-child(3)::before {
  background-image: url(../images/ranking_ico_003.png);
}
a.ranking-link {
  display: inline-block;
  padding: 4px 0;
  color: #666;
  line-height: 1.4;
  text-decoration: none;
}
.ranking-link:visited {
  color: #666;
}


/*=== 記事一覧 ===*/
.articleList {
  margin-top: 5px;
  padding: 30px 40px;
  border: 5px solid #f2f2f2;
  background-color: #fff;
}
.articleList-sec {
  margin-top: 50px;
}
.articleList-ttl {
  font-size: 22px;
  font-weight: bold;
}
.articleList-list {
  margin-top: 20px;
}
a.articleList-link {
  color: #333;
  text-decoration: none;
}
a.articleList-link:visited {
  color: #333;
}
a.articleList-link:hover {
  opacity: 0.7;
  text-decoration: none;
}


/*=== SNS ===*/
.sns-txt {
  margin: 40px 0 5px;
  color: #999;
  font-size: 14px;
  text-align: center;
}
.sns-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.sns-item {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  margin: 0 25px;
}
.sns-btn {
  display: block;
}
.sns-btn:hover {
  opacity: 0.7;
}


/*=== 記事本文 見出し ===*/
.articleHead {
  display: flex;
  padding-bottom: 20px;
}
.articleHead-head {
  margin-right: 10px;
  font-weight: bold;
  line-height: 1;
}
.articleHead-case {
  font-size: 16px;
}
.articleHead-number {
  font-size: 30px;
}
.articleHead-ttl {
  font-weight: bold;
  font-size: 24px;
  line-height: 1.2;
}
.articleHead-category {
  min-height: 26px;
  margin-top: 5px;
  color: #666;
  font-size: 14px;
}
.articleHead-label {
  margin-right: 8px;
  padding: 2px 10px 4px;
  color: #fff;
  font-weight: bold;
}
.articleHead-ver {
  display: flex;
  align-items: baseline;
  margin-top: 2px;
}
.articleHead-txt {
  flex-shrink: 0;
  margin-right: 5px;
  font-size: 14px;
}
.articleHead-list {
  font-size: 0;
}
.articleHead-item {
  display: inline-block;
  margin: 2px;
  padding: 2px 4px;
  border: 1px solid #d2d2d2;
  font-weight: bold;
  font-size: 12px;
  line-height: 1;
  background-color: #f2f2f2;
  border-radius: 2px;
}


/*=== 記事本文 見出し画像 ===*/
.articleThumb {
  margin: 20px auto;
}
.articleThumb-item:not(:first-child) {
  margin-top: 20px;
}


/*=== 記事本文 目次 ===*/
.articleIndex {
  position: relative;
  margin-top: 30px;
  padding: 20px 40px;
  background-color: #f6f8f7;
}
.articleIndex-head {
  display: flex;
  align-items: baseline;
}
.articleIndex-icon {
  width: 11px;
  height: 12px;
  vertical-align: middle;
}
.articleIndex-icon span,
.articleIndex-icon span::before,
.articleIndex-icon span::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 11px;
}
.articleIndex-icon span::before {
  bottom: -4px;
}
.articleIndex-icon span::after {
  bottom: -8px;
}
.articleIndex-ttl {
  margin: 0 10px;
  font-weight: bold;
  font-size: 18px;
}
.articleIndex-btn {
  appearance: none;
  display: block;
  position: relative;
  padding: 2px 10px 3px 30px;
  border: 2px solid currentColor;
  border-radius: 25px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
.articleIndex-btn::before,
.articleIndex-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 12px;
  height: 2px;
  background-color: currentColor;
  transform: translateY(-50%);
}
.articleIndex-btn::after {
  transform: translateY(-50%) rotate(90deg);
}
.articleIndex.is-AcorShow .articleIndex-btn::before {
  transform: translateY(-50%) rotate(45deg);
}
.articleIndex.is-AcorShow .articleIndex-btn::after {
  transform: translateY(-50%) rotate(-45deg);
}
.articleIndex-btn:hover {
  opacity: 0.7;
}
.articleIndex-list {
  position: relative;
  top: 15px;
  padding-bottom: 20px;
  list-style: none;
  counter-reset: li;
}
.articleIndex-item {
  padding-left: 1.15em;
  line-height: 1.4;
  text-indent: -1.15em;
}
.articleIndex-item:not(:first-child) {
  margin-top: 10px;
}
.articleIndex-item:before {
  content: counter(li) ". ";
  font-weight: bold;
  counter-increment: li;
}
.articleIndex-item a,
.articleIndex-item a:visited {
  color: #232b35;
  text-decoration: none;
}


/*=== 記事本文 ===*/
.article-cont {
  margin-top: 30px;
}
.article-subttl {
  margin-top: 60px;
  padding: 25px 20px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  line-height: 1.4;
  background: url(../images/article_bg_001.png) repeat-y right top;
}
.article-cont > h4,
.article-sec > h4 {
  margin-top: 50px;
  padding-left: 12px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1.4;
}
.article-cont > p,
.article-sec > p {
  margin-top: 25px;
}
.article-cont .type-em {
  font-weight: bold;
}
.article-cont figure {
  max-width: 675px;
  margin: 20px auto 0;
}
.article-cont .type-border {
  border: 0.5px solid #808080;
}
.article-cont table {
  width: 100%;
  margin-top: 25px;
  border-collapse: collapse;
  border-spacing: 0;
  border: solid 1px #b8b8b8;
  text-align: center;
}
.article-cont figcaption > *:first-child {
  margin-top: 0;
}
.article-cont figcaption p,
.article-cont figcaption table {
  margin-top: 10px;
}
.article-cont figcaption ul {
  margin-top: 10px;
  padding-left: 25px;
}
.article-cont tbody {
  margin-top: 10px;
}
.article-cont th {
  padding: 5px;
  border: solid 1px #aaa;
  vertical-align: middle;
  background-color: #f2f2f2;
}
.article-cont td {
  padding: 5px;
  border: solid 1px #b8b8b8;
  font-size: 14px;
  background-color: #fff;
}
.article-cont caption {
  font-weight: bold;
  text-align: left;
}


/*=== 補足 ===*/
.supplement {
  max-width: 675px;
  margin: 25px auto 0;
  padding: 15px 20px;
  border-radius: 10px;
}
.supplement > *:first-child {
  margin-top: 0;
}
.supplement p {
  margin-top: 25px;
}


/*=== あわせて読みたい ===*/
.withPart {
  position: relative;
  margin-top: 55px;
  border: 2px solid #e3e3e3;
  border-radius: 10px;
}
.withPart + figure {
  margin-top: 40px;
}
.withPart-label {
  position: absolute;
  top: -22px;
  left: 20px;
  padding: 5px 20px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  border-radius: 10px;
}
a.withPart-link {
  display: flex;
  position: relative;
  padding: 40px 60px 20px 20px;
  color: #232b35;
  text-decoration: none;
}
a.withPart-link:visited {
  color: #232b35;
}
.withPart a:hover {
  text-decoration: none;
  opacity: 0.7;
}
a.withPart-link::before {
  position: absolute;
  content:"";
  top: 50%;
  right: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: 1;
  transform: translateY(-50%);
}
a.withPart-link::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 28px;
  width: 8px;
  height: 12px;
  background-color: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  z-index: 2;
  transform: translateY(-50%);
}
.withPart-thumb {
  flex-shrink: 0;
  margin-right: 20px;
}
.withPart-thumb img {
  box-shadow: 0 0 8px #c7c7c7;
}
.withPart-ttl {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
}
.withPart-txt {
  margin-top: 5px;
}


/*=== アンケート ===*/
.questionnaire {
  margin-bottom: 20px;
  padding: 14px 40px 18px;
  background-color:#f0f0f0;
}
.questionnaire-lead {
  display: block;
  position: relative;
  min-height: 74px;
  padding: 12px 0 5px 70px;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3;
}
.questionnaire-lead::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 62px;
  height: 74px;
}
.questionnaire-textarea {
  resize: none;
  width: 100%;
  padding: 8px;
  border: 1px solid #a3a3a3;
  box-shadow: inset -2px 1px 6px #cecece;
}
.questionnaire-textarea:focus {
  outline: 0;
}
.questionnaire-note {
  margin-top: 5px;
  padding-left: 1em;
  font-size: 14px;
  text-indent: -1em;
}
.questionnaire-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 250px;
  min-height: 42px;
  margin: 10px auto 0;
  padding: 5px 40px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  background-color: #666;
  border-radius: 50px;
  cursor: pointer;
}
.questionnaire-submit::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 12px;
  background-color: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transform: translateY(-50%);
}
.questionnaire-submit.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.questionnaire-txt {
  margin-top: 10px;
}


/*=== バナー ===*/
.bannerArea {
  text-align: center;
}


/*=== おすすめ ===*/
.recommend-inner {
  display: flex;
}
.recommend-ttl {
  flex-shrink: 0;
  position: relative;
  width: 74px;
  height: 74px;
  margin: -5px 16px 0;
  padding: 20px 0 0 5px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  background-color: #a18871;
  border-radius: 50%;
}
.recommend-ttl::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 43px;
  width: 31px;
  height: 31px;
  background: url(../images/recommend_ico_001.png) no-repeat 0 0 / 100% auto;
}
.recommend-list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 5px 0;
}
.recommend-item {
  width: 100%;
  margin: 5px;
  max-width: 230px;
}
a.recommend-link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  color: #232b35;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  background-color: #fff;
}
a.recommend-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%);
  transform: rotate(90deg);
}
a.recommend-link:visited {
  color: #232b35;
}
a.recommend-link:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*=== サイドエリア ===*/
.sideCont {
  margin-top: 20px;
  padding: 0 15px 15px;
}
.sideCont-ttl {
  margin: 0 -15px;
  padding: 10px 15px;
  border: 1px solid #fff;
  border-bottom: none;
  color: #4c4c4c;
  font-weight: bold;
  font-size: 16px;
  background-image: none;
  background:linear-gradient(to bottom, #f2f2f2, #fff);
}
a.sideCont-link {
  text-decoration: none;
}
a.sideCont-link:hover {
  text-decoration: underline;
}


/*=== サイドバナー ===*/
.sideBanner {
  margin-top: 20px;
}
.sideBanner-item {
  margin-top: 20px;
  text-align: center;
}
.sideBanner a:hover {
  opacity: 0.7;
}


/*=== サイドランキング ===*/
.sideRanking-item {
  position: relative;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-size: 35px;
}
.sideRanking-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.sideRanking-item:first-child::before {
  left: -3px;
  width: 25px;
  background-image: url(../images/ranking_ico_001.png);
}
.sideRanking-item:nth-child(2)::before {
  left: -3px;
  width: 25px;
  background-image: url(../images/ranking_ico_002.png);
}
.sideRanking-item:nth-child(3)::before {
  left: -3px;
  width: 25px;
  background-image: url(../images/ranking_ico_003.png);
}
a.sideRanking-link {
  display: block;
  padding: 0 20px 0 30px;
  color: #232b35;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
a.sideRanking-link:visited {
  color: #232b35;
}
a.sideRanking-link:hover {
  opacity: 0.7;
  text-decoration: none;
}
a.sideRanking-link::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 12px;
  background-color: #666;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transform: translateY(-50%);
}
.sideRanking-lead {
  font-weight: bold;
}


/*=== サイド一覧 ===*/
.sideList-box {
  margin-top: 15px;
}
.sideList-ttl {
  padding: 8px 0 8px 25px;
  border: 1px solid #e3e3e3;
  color: #4c4c4c;
  font-size: 14px;
  line-height: 1.4;
  text-indent: -1.1em;
  background-color: #f6f8f7;
}
.sideList-ttl span {
  font-weight: bold;
}
.sideList-item {
  position: relative;
}
.sideList-item::before {
  content: "・";
}
a.sideList-link {
  color: #232b35;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}
a.sideList-link:visited {
  color: #232b35;
}
.sideList-more {
  margin-top: 5px;
  text-align: right;
}
.sideList-more a {
  display: inline-block;
  position: relative;
  padding-right: 5px;
  color: #232b35;
  font-size: 12px;
  text-decoration: none;
}
.sideList-more a:visited {
  color: #232b35;
}
.sideList-more a::after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0;
  right: -5px;
  width: 6px;
  height: 10px;
  background-color: #666;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}


/*=== PRバナー ===*/
.prBanner-item {
  display: flex;
  margin-top: 15px;
}
.prBanner-thumb {
  flex-shrink: 0;
  width: 120px;
  margin-right: 10px;
}
a.prBanner-link:hover {
  opacity: 0.7;
}
.prBanner-cont {
  flex-grow: 1;
  font-size: 13px;
  line-height: 1.4;
}
.prBanner-lead {
  font-weight: bold;
}
.prBanner-new {
  padding: 0 2px;
  color: #fff;
  background-color: #ff0000;
}
.prBanner-more {
  margin-top: 5px;
  text-align: right;
}
.prBanner-more a {
  display: inline-block;
  position: relative;
  padding-right: 5px;
  color: #232b35;
  font-size: 12px;
  text-decoration: none;
}
.prBanner-more a:visited {
  color: #232b35;
}
.prBanner-more a::after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0;
  right: -5px;
  width: 6px;
  height: 10px;
  background-color: #666;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}


/*=== 注目ニュース ===*/
.news-item {
  border-bottom: 1px solid #e3e3e3;
}
a.news-link {
  display: flex;
  padding: 10px 0;
  color: #232b35;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
a.news-link:visited {
  color: #232b35;
}
a.news-link:hover {
  text-decoration: none;
  opacity: 0.7;
}
.news-thumb {
  flex-shrink: 0;
  width: 120px;
  max-height: 80px;
  margin-right: 10px;
  overflow: hidden;
}
.news-txt span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}


/*=== ページャー ===*/
.pager-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  font-size: 14px;
  font-weight: bold;
}
a.pager-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.pager-prev,
.pager-next {
  min-width: 50px;
}
.pager-prev a.pager-link::before {
  content: "";
  display: inline-block;
  position: relative;
  top: 0;
  left: -10px;
  width: 8px;
  height: 12px;
  background-color: #666;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.pager-next a.pager-link::after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0;
  right: -10px;
  width: 8px;
  height: 12px;
  background-color: #666;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.pager-icon {
  padding-right: 3px;
}


@media screen and (max-width: 768px) {
  /*=== メインレイアウト ===*/
  .main {
    padding-bottom: 20px;
  }
  .main-inner {
    margin-bottom: 20px;
  }
  .main-container {
    background-size: 8px 8px;
  }
  .main-column {
    display: block;
    padding: 20px 10px 40px;
  }
  .main-body {
    width: 100%;
  }
  .main-section {
    padding: 0 10px;
  }
  .main-side {
    width: 100%;
    margin-left: 0;
  }
  .main-ttl {
    font-size: 18px;
  }
  .article {
    margin-top: 0;
    padding: 15px 10px 20px;
  }
  /*=== メインビジュアル ===*/
  .mainvisual-main {
    padding: 0;
  }
  /*=== 習得できること ===*/
  .learn {
    display: block;
    padding: 10px 15px;
  }
  .learn-ttl {
    width: 100%;
    margin-right: 0;
    font-size: 14px;
    text-align: left;
  }
  .learn-list {
    width: 100%;
  }
  .learn-item {
    margin-top: 5px;
    padding-left: 25px;
    font-size: 14px;
  }
  .learn-item::before {
    top: 3px;
  }
  /*=== 最新記事 ===*/
  .latest {
    padding: 15px 10px;
  }
  a.latest-link {
    padding: 10px 10px 10px 35px;
  }
  a.latest-link::before {
    width: 40px;
    height: 40px;
  }
  .latest-new {
    top: 7px;
    left: 0;
  }
  .latest-case {
    font-size: 12px;
  }
  .latest-number {
    font-size: 22px;
  }
  .latest-ttl {
    font-size: 17px;
  }
  .latest-category {
    min-height: 19px;
    font-size: 12px;
  }
  .latest-label {
    margin-right: 5px;
    padding: 0 10px 2px;
  }
  /*=== ランキング ===*/
  .ranking-item::before {
    top: 3px;
  }
  /*=== 記事一覧 ===*/
  .articleList {
    padding: 20px 10px;
    border-width: 2px;
  }
  .articleList-ttl {
    font-size: 16px;
  }
  .articleList-list {
    margin-top: 10px;
  }
  /*=== SNS ===*/
  .sns-txt {
    margin-top: 30px;
    font-size: 12px;
  }
  .sns-item {
    margin: 0 15px;
  }
  /*=== 記事本文 見出し ===*/
  .articleHead {
    display: block;
  }
  .articleHead-head {
    margin-right: 0;
  }
  .articleHead-case {
    font-size: 13px;
  }
  .articleHead-number {
    font-size: 24px;
  }
  .articleHead-ttl {
    margin-top: 5px;
    font-size: 18px;
  }
  .articleHead-category {
    min-height: 19px;
    font-size: 12px;
  }
  .articleHead-label {
    margin-right: 5px;
    padding: 0 10px 2px;
  }
  .articleHead-ver {
    display: block;
  }
  .articleHead-txt {
    margin-right: 0;
    font-size: 12px;
  }
  .articleHead-item {
    font-size: 10px;
  }
  /*=== 記事本文 見出し画像 ===*/
  .articleThumb-item {
    max-width: 550px;
    margin: 0 auto;
  }
  .articleThumb-item:not(:first-child) {
    margin-top: 10px;
  }
  /*=== 記事本文 目次 ===*/
  .articleIndex {
    padding: 15px 10px;
  }
  .articleIndex-ttl {
    font-size: 16px;
  }
  .articleIndex-list {
    padding-bottom: 15px;
  }
  /*=== 記事本文 ===*/
  .article-cont {
    margin-top: 30px;
  }
  .article-subttl {
    margin-top: 40px;
    padding: 15px 20px 15px 10px;
    font-size: 16px;
  }
  .article-cont > h4,
  .article-sec > h4 {
    margin-top: 40px;
    font-size: 16px;
  }
  .article-cont > p,
  .article-sec > p {
    margin-top: 20px;
  }
  .article-cont figure {
    max-width: 550px;
  }
  .article-cont table {
    margin-top: 20px;
  }
  /*=== 補足 ===*/
  .supplement {
    max-width: 100%;
    padding: 15px 10px;
  }
  .supplement p {
    margin-top: 20px;
  }
  /*=== あわせて読みたい ===*/
  .withPart {
    margin-top: 50px;
  }
  .withPart + figure {
    margin-top: 30px;
  }
  .withPart-label {
    top: -20px;
    left: 10px;
    font-size: 16px;
  }
  a.withPart-link {
    display: block;
    padding: 30px 40px 15px 10px;
  }
  a.withPart-link::before {
    right: 10px;
    width: 25px;
    height: 25px;
  }
  a.withPart-link::after {
    right: 17px;
  }
  .withPart-thumb {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
  }
  .withPart-ttl {
    margin-top: 15px;
    font-size: 14px;
  }
  /*=== アンケート ===*/
  .questionnaire {
    padding: 14px 10px 18px;
  }
  .questionnaire-lead {
    min-height: 60px;
    padding: 0 0 5px 60px;
    font-size: 14px;
  }
  .questionnaire-lead::before {
    width: 50px;
    height: 60px;
  }
  .questionnaire-textarea {
    box-shadow: inset -1px 1px 3px #cecece;
  }
  .questionnaire-note {
    font-size: 12px;
  }
  .questionnaire-submit::after {
    right: 15px;
  }
  /*=== サイドエリア ===*/
  .sideCont {
    padding: 0 10px 15px;
  }
  .sideCont-ttl {
    margin: 0 -10px;
    padding: 10px;
  }
  /*=== サイドバナー ===*/
  .sideBanner {
    max-width: 550px;
    margin: 20px auto 0;
    text-align: center;
  }
  /*=== サイド一覧 ===*/
  .sideList-item {
    margin-top: 5px;
  }
  /*=== ページャー ===*/
  .pager-inner {
    padding: 0 20px;
  }
}