html, body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: "ヒラギノ角ゴ ProN W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,"meiryo","メイリオ","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
  color: #666;
  min-width: 1200px;
  line-height: 1.58;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  background-color: #f9f9f9;
  letter-spacing: 1.3px;
}

@media only screen and (max-width: 640px) {
  html, body {
    max-width: 640px;
    min-width: 320px;
    font-size: 12px;
  }
}
img {
  max-width: 100%;
  height: auto;
}


.box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左詰めにする */
  padding: 20px;
  margin: 0 auto;
}

.box {
  border: 2px solid #e57373;
  color: #e57373;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  width: 150px;
  height: 80px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  flex-basis: calc(33.33% - 10px); /* 3列にする */
  min-width: 120px; /* 最小幅を設定 */
}

.box.empty {
  visibility: hidden; /* 空のボックスは表示されないがスペースを確保 */
}

@media (max-width: 768px) {
  .box {
    flex-basis: calc(50% - 10px); /* スマホでも2列に調整 */
  }
}

@media (max-width: 480px) {
  .box {
    flex-basis: calc(50% - 10px); /* スマホでも2列を維持する */
  }
}


.box:hover {
  background-color: #EE726D; /* ホバー時に背景を赤くする */
  color: #fff; /* ホバー時にテキストを白くする */
}

.box:active {
  background-color: #ffcccc; /* クリック時にさらに色を濃くする */
}



/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  transition-property: color;
  transition-duration: .3s;
}

.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ff6766;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  transition-property: -webkit-transform;
  transition-property:         transform;
  transition-property:         transform, -webkit-transform;
  transition-duration: .3s;
  transition-timing-function: ease-out;
}

.hvr-sweep-to-right:hover a, .hvr-sweep-to-right:focus a, .hvr-sweep-to-right:active a {
  color: #fff;
  opacity: 1;
  background-color: transparent;
}

.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}



.l-inner {
  width: 1200px;
  margin: 0 auto;
}

.l-content {
  padding-top: 60px;
  padding-bottom: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.l-main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
      flex: 1;
}

.l-main-width-box {
  width: 850px;
}

.l-side {
  width: 350px;
  padding-left: 25px;
  box-sizing: border-box;
}

.l-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  .l-row {
    display: block;
  }
}

@media only screen and (max-width: 640px) {
  .l-inner {
    width: 100%;
    width: 94%;
    margin: 0 auto;
  }
  .l-content {
    display: block;
    padding-top: 20px;
  }
  .l-main-width-box {
    width: 100%;
  }
  .l-side {
    width: 100%;
    padding: 0;
  }
}


.txtbox .m-ttl-02 a {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #666 !important;
}

@media only screen and (max-width: 640px) {
  .m-ttl-02 {
    font-size: 10px;
  }
}
.m-ttl-03 {
  position: relative;
  line-height: 1;
}

.m-ttl-03 .txt {
  font-size: 20px;
  font-weight: bold;
  color: #666;
}

.side-box.ranking .m-ttl-03 .border,
.side-box.recommend .m-ttl-03 .border {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #ff6766;
  margin-top: 10px !important; /* タイトルとボーダーの間にスペースを追加 */
}

.m-searchbox {
  border: 1px solid #ccc;
  border-radius: 30px;
  overflow: hidden;
  width: 285px;
  margin: 0 auto;
  box-sizing: border-box;
}
.m-searchbox form .search_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.m-searchbox input {
  background-color: transparent;
  border: none;
  padding: 5px 10px 5px 20px;
  width: 235px;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
  border-radius: 0;
}
.m-searchbox button {
  -webkit-appearance: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 25px;
  color: #aaaaaa;
}





/*------------------------
  アーカイブページ
  .archive
------------------------*/
.articles-list  {
  margin-top: 40px;
}

.archive .archive-ttl {
  border-bottom: 3px solid #ff6766;
  padding-bottom: 5px;
  margin-bottom: 34px;
  margin-right: 20px;
}

/*------------------------
  .articles-list
------------------------*/
.articles-list article {
  padding-right: 20px;
  margin-bottom: 60px;
  word-break: break-word;
}

.articles-list article .pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.articles-list article .pc .m-ttl-02 {
  width: 390px;
}

.articles-list .article-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.articles-list .imgbox {
  width: 150px;
  margin-right: 30px;
}
.articles-list .imgbox a {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  display: block;
}
.articles-list .imgbox a .imgwrap {
  height: 100%;
}

.articles-list .txtbox {
  -webkit-box-flex: 1;
  -ms-flex: 1;
      flex: 1;
  padding-top: 9px;
	margin-top:-35px;
}
.articles-list .txtbox .m-ttl-02 {
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 3px solid #ff6766;
}
.articles-list .txtbox .date-cate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}
.articles-list .txtbox .category {
  margin-left: 10px;
}
.articles-list .txtbox .category a {
  display: inline-block;
  color: #fff;
  background-color: #ff6766;
  padding: 0px 16px 0px 16px;
  border-radius: 20px;
}
.articles-list .txtbox .date {
  font-weight: bold;
}
.articles-list .txtbox .excerpt {
  margin-bottom: 16px;
  line-height: 2;
	margin-top:-20px;
}
.articles-list .txtbox .m-btn {
  float: right;
}
.articles-list .txtbox .m-btn a {
  padding: 10px 0;
}


/* タグリストのスタイル */
.side-box.ranking ul {
    list-style-type: none; /* Remove the dot */
    padding: 0;
    margin: 0;
}

.side-box.ranking ul li {
    margin-bottom: 5px;
    padding-left: 1em; /* Add indentation */
    position: relative;
}

.side-box.ranking ul li::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background-color: #666;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.side-box.ranking ul li a {
    text-decoration: none;
    color: #666;
}

/* アーカイブのスタイル */
.articles-list-side ul {
    list-style-type: none; /* Remove the dot */
    padding: 0;
    margin: 0;
}

.articles-list-side ul li {
    margin-bottom: 5px;
    padding-left: 1em; /* Add indentation */
    position: relative;
}

.articles-list-side ul li::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background-color: #666;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.articles-list-side ul li a {
    text-decoration: none;
    color: #666;
}

.articles-list-side ul li a span {
    color: #ff6766;
    font-weight: bold;
    margin-left: 5px;
}


@media only screen and (max-width: 640px) {
  .archive .archive-ttl {
    font-size: 16px;
    margin-right: 0;
  }
  .articles-list article {
    display: block;
    position: relative;
    padding: 0;
  }
  .articles-list .upper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .articles-list .imgbox {
    width: 125px;
    height: 125px;
    margin-right: 10px;
    margin-bottom: 14px;
  }
  .articles-list .imgbox a {
    width: 125px;
    height: 125px;
    padding: 5px;
    margin-right: 10px;
  }
}

@media only screen and (max-width: 640px) and (min-width: 320px) and (max-width: 400px) {
  .articles-list .imgbox {
    width: 95px;
    height: 95px;
  }
  .articles-list .imgbox a {
    width: 95px;
    height: 95px;
  }
}

@media only screen and (max-width: 640px) {
  .articles-list .txtbox {
    padding: 0;
    border: none;
  }
  .articles-list .txtbox .category {
    font-size: 12px;
  }
  .articles-list .txtbox .m-ttl-02 {
    font-size: 12px;
  }
  .articles-list .txtbox .date {
    font-size: 10px;
  }
}

.single {
  word-break: break-word;
}
.single .post_thumb {
  border: 1px solid #cccccc;
  padding: 10px;
  display: inline-block;
  margin-bottom: 30px;
}
.single .post_ttl {
  margin-bottom: 15px;
  line-height: 1.8;
}
.single .post_data_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.single .post_date {
  margin-right: 20px;
  font-weight: bold;
}
.single .post_cat a {
  background-color: #ff6766;
  padding: 2px 20px 3px 20px;
  color: #fff;
  border-radius: 25px;
}
.single .m-authorbox {
  margin: 40px 0;
}
.single .wp-editor-content {
  font-size: 16px;
  line-height: 26px;
}

@media only screen and (max-width: 640px) {
  .single .post_thumb {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-bottom: 30px;
  }
  .single .post_ttl {
    font-size: 16px;
  }
  /*.single .wp-editor-content p {
    font-size: 13px;
  }*/
}

.m-btn {
  border: 1px solid #ff6766;
  border-radius: 25px;
  text-align: center;
  width: 150px;
  overflow: hidden;
}
.m-btn a {
  background-color: #fff;
  display: block;
  color: #ff6766;
  padding: 14px 0;
}

@media only screen and (max-width: 640px) {
  .m-btn {
    width: 110px;
  }
  .m-btn a {
    font-size: 10px;
    padding: 6px 0;
  }
}

.post h1.post_ttl.m-ttl-03 {
	padding-top:12px;
}
.post_ttl.m-ttl-03 {
  position: relative;
  line-height: 1;
}
.post_ttl.m-ttl-03 .txt {
  font-size: 22px;
  font-weight: bold;
  color: #666;
}
.post_ttl.m-ttl-03 .border {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #ff6766; /* ピンク色のアンダーライン */
  margin-top: 10px !important; /* タイトルとボーダーの間にスペースを追加 */
}

.post .wp-editor-content p {
  color: #666 !important;
  font-size: 16px !important;
}

.link-more  {
	 display:none;
}

/* ページネーションのスタイル */
.m-pagenation {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.m-pagenation a,
.m-pagenation span {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.m-pagenation a:hover,
.m-pagenation a:focus {
    background-color: #ff6766;
    color: #fff;
    border-color: #ff6766;
}

.m-pagenation .current {
    background-color: #ff6766;
    color: #fff;
    border-color: #ff6766;
}

.m-pagenation .prev,
.m-pagenation .next {
    font-weight: bold;
}

.m-pagenation .dots {
    padding: 10px 15px;
    color: #999;
}

/* メディアクエリでの調整 */
@media (max-width: 640px) {
    .m-pagenation a,
    .m-pagenation span {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* パンくずリストのスタイル調整 */
.breadcrumb {
    margin: 10px 0; /* 上下の余白を調整 */
    padding: 0; /* 内側の余白を調整 */
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向に中央揃え */
}

.breadcrumb li {
    list-style: none; /* リストマーカーを消す */
    display: inline; /* 横並びにする */
    font-size: 14px; /* フォントサイズを調整 */
    color: #333; /* テキスト色を設定 */
}

.breadcrumb li a {
    text-decoration: none; /* 下線を消す */
    color: #ff6766; /* リンク色を設定 */
    margin: 0 5px; /* リンクの左右の余白を設定 */
}

.breadcrumb li::after {
    content: ">"; /* 区切り文字を追加 */
    margin: 0 5px; /* 区切り文字の左右の余白を設定 */
    color: #333; /* 区切り文字の色を設定 */
}

.breadcrumb li:last-child::after {
    content: ""; /* 最後の区切り文字を消す */
}

.breadcrumb li:last-child {
    color: #666; /* 最後の項目の色を設定 */
}

/* 記事内リセット解除 */
article.post.learning ol {
    counter-reset: list-counter; 
    list-style: none; 
    margin-left: 15px !important;
    padding-left: 20px !important;
}

article.post.learning ol > li {
    counter-increment: list-counter; 
    margin-bottom: 10px; 
    position: relative;
}

article.post.learning ol > li::before {
    content: counter(list-counter) ". "; 
    position: absolute;
    left: -30px; /* 番号をさらに左に移動 */
    margin-right: 10px; /* 番号とテキストの間の余白を広げる */
}

article.post.learning ol ol {
    counter-reset: sublist-counter; 
    list-style: none; 
    margin-left: 20px !important;
    padding-left: 20px !important;
}

article.post.learning ol ol > li {
    counter-increment: sublist-counter; 
    position: relative;
    margin-bottom: 5px; 
}

article.post.learning ol ol > li::before {
    content: counter(list-counter) "-" counter(sublist-counter) " "; 
    position: absolute;
    left: -30px; 
    margin-right: 10px; 
}

article.post.learning ul {
    list-style-type: disc !important; 
    margin-left: 15px !important; /* ドットリストをさらに左に */
    padding-left: 0 !important;
}

article.post.learning ul li {
    list-style-type: disc !important;
    margin-left: 15px !important; /* ドットリストアイテムをさらに左に */
    padding-left: 0 !important;
    display: list-item !important;
}

article.post.learning img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; 
}


#post-learning .wp-editor-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#post-learning table td, 
#post-learning table th {
    border: 1px solid #000000;
    padding: 10px;
}