@charset "UTF-8";

/*ブログページ*/
.blog-contents img{ display: block; width: 100%; height: auto; margin: 0 auto;}
.trimming_wrapper img{ max-width: 100%;}

.blog-title{ color: #AC0000; font-size: 2.3rem; margin: 10px 0 30px; text-align: center; font-weight: bold; position: relative; padding: 15px 30px; border-top: solid 2px #AC0000; border-bottom: solid 2px #AC0000;}
.blog-title:before, .blog-title:after {content: ''; position: absolute; top: -7px; width: 2px; height: -webkit-calc(100% + 14px); height: calc(100% + 14px); background-color: #AC0000;}
.blog-title:before { left: 7px;}
.blog-title:after { right: 7px;}

a.blog-tag{
  display: block;
  width: fit-content;
  color: #333;
  border-radius: 5px;
  line-height: 1;
  padding: 5px 10px;
  margin: 0 0 5px;
  border: 1px solid #333;
  transition: .3s all;
}
a.blog-tag:hover{
  background: #333;
  color: #fff;
}

.blog-contents h2{ font-size: 2.0rem; font-weight: bold; border-left: 5px solid #AC0000; padding: 0 15px; margin: 60px 0 30px;}
.blog-contents h3{ color: #333; font-size: 1.8rem; font-weight: bold; margin: 40px 0 20px; position:relative; padding-left: 33px;}
.blog-contents h3:before, .blog-contents h3:after { position: absolute; display: block; content: ""; width: 15px; height: 15px;}
.blog-contents h3:before { top: 3px; left: 0; background: #aaa;}
.blog-contents h3:after { top: 8px; left: 6px; background: #333;}
.blog-contents h4{ color: #333; font-weight: bold; font-size: 1.6rem; border-bottom: 1px solid #333; margin: 30px 0 20px; padding: 0 5px; display: inline-grid;}
.blog-contents h5{ color: #333; font-weight: bold; font-size: 1.6rem; margin: 25px 0 15px;}
.blog-contents p{ padding: 0 0 15px 0;}

.blog-contents a{ color: blue; padding: 0 3px; border-bottom: 1px solid blue;}
.blog-contents a:hover{ color: #337ab7; border-bottom: 1px solid #337ab7;}
.trimming_wrapper a{ display: contents;}
.wrapper{position: relative; transition: .3s all;}
.wrapper:hover{ opacity: .5;}
.item_wrapper .wrapper_link{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 99;}

.blog-contents ul{ max-width: 500px; margin: 0 auto 15px; box-shadow: 0px 0px 4px #CE9D00; padding: 0.5rem 2.3rem 0.5rem; position: relative; background: #FFF;}
.blog-contents ul li { line-height: 1.5; padding: 0.5rem 0; list-style-type: none!important;}
.blog-contents ul li::before { content: "▶️"; left: 0; color: #CE9D00; font-size: 1.2rem; padding: 0 3px 0 0;}
.blog-contents ol{ max-width: 500px; margin: 0 auto 15px; counter-reset: number; list-style-type: none!important; padding: 0.3em 0.8em; border: solid 2px #CE9D00; background-color: #FFF;}
.blog-contents ol li { border-bottom: dashed 1px #CE9D00; position: relative; padding: 0.5rem 0.5rem 0.5rem 30px; line-height: 1.5em;}
.blog-contents ol li::before { position: absolute; counter-increment: number; content: counter(number); display: inline-block; background: #CE9D00; color: white; font-size: 16px; border-radius: 50%; left: 2px; width: 22px; height: 22px; line-height: 22px; text-align: center; top: 50%; padding: 0 0 0 1px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.blog-contents ol li:last-of-type { border-bottom: none;}

.blog-contents .red{ font-size: 1.5rem; color: #AC0000; font-weight: bold;}

/* ブログページ目次 */
.toc{ border: 1px solid #333; line-height: 3rem; margin: 20px auto; padding: 20px 60px; background: #FFF; width: fit-content;}
.toc p.toc-title { font-size: 2rem; padding: 0;}
.toc ul { max-width: 100%; margin: auto; box-shadow: none; padding: 0;}
.toc ul li { padding: 0; line-height: 3rem;}
.toc ul li::before { display: none;}
.toc span.contentstable-number { display: none;}
.toc ul ul { padding: 0 0 0 20px;}
.toc a { color: #333; font-size: 1.5rem; font-weight: bold; border: none;}
.toc a:hover{ color: #333; border: none; text-decoration: underline;}
@media screen and (max-width: 767px) {
  .toc{ padding: 10px 15px;}
  .toc p.toc-title{ line-height: 20px; padding: 10px 0;}
  .toc ul li { line-height: 2.5rem;}
  .toc a{ font-weight: normal; line-height: 16px; font-size: 1.4rem; font-weight: normal; display: inline-block; padding: 3px 0 5px 0;}
}

.item_wrapper .archive-blog-title{ font-weight: bold; color: #AC0000; margin: 0;}

.Purchase-record{ display: flex; flex-wrap: wrap;}
.blog-label{ background-color: #FFF; display: inline-block; padding: 20px 50px 15px; margin: 0 10px 15px; text-align: left; border: 2px solid #AC0000; max-width: 45%;}
.blog-label p{ padding: 4px 0 11px; font-size: 17px; line-height: 1.5; font-weight: bold;}
.blog-label .label{ color: #FFF; font-size: 14px; line-height: 30px; background-color: #AC0000; padding: 4px 6px; font-weight: normal;}

@media screen and (max-width: 767px) {
  .blog-label{ padding: 15px 30px 9px; margin: 0 5px 15px; max-width: 100%;}
}

/*おすすめのブログ*/
.recommended-title{ background-color: #AC0000; color: #FFF; font-size: 2rem; text-align: center; padding: 3px; margin: 50px 0 0;}
.recommended-link a{ color: #AC0000; border: 2px solid #AC0000; padding: 3px 8px; margin: 30px auto 0; max-width: 150px; text-align: center; display: block; font-weight: bold; font-size: 1.5rem; transition: 0.3s;}
.recommended-link a:hover{ color: #FFF; background-color: #AC0000;}

.blog-item_wrapper{ width: 100%; padding: 30px 10px; display: flex; border-bottom: 1px solid #ccc;}
.blog-item_wrapper a { display: contents;}
.blog-item_wrapper p { padding: 0; color: #333;}
.blog-article{ width: 23%; min-width: 60px; max-width: 200px;}
.blog-article img{ width: 100%; height: auto;}

.blog-article-contects{ padding: 0 0 0 20px; width: 77%;}
.blog-article-contects .archive-blog-title{ font-size: 1.7rem; color: blue; font-weight: bold;}
@media screen and (max-width: 400px) {
  .blog-item_wrapper { padding: 20px 0 10px; letter-spacing: 0;}
  .blog-article { max-width: 100px;}
  .blog-article-contects { padding: 0 0 0 10px; width: 100%;}
}

blockquote {
  position: relative; padding: 10px 50px; display: table; box-sizing: border-box; font-style: italic; color: #585858;
  border: solid 3px #585858; text-align: center; margin: 60px auto 50px; background-color: #FFF;}
@media screen and (max-width: 767px) {
  blockquote{margin: 60px 10px 50px; padding: 10px 15px;}
}
blockquote:before{
  display: inline-block; position: absolute;
  top: -20px; left: -20px; width: 40px; height: 40px; line-height: 40px;
  border-radius: 50%; text-align: center; content: "\f10d"; font-family: FontAwesome;
  background: #585858; color: #FFF; font-size: 22px;
}
blockquote:after{
  display: inline-block; position: absolute;
  bottom: -20px; right: -20px; width: 40px; height: 40px; line-height: 40px;
  border-radius: 50%; text-align: center; content: "\f10e"; font-family: FontAwesome;
  background: #585858; color: #FFF; font-size: 22px; font-weight: 900;
}
blockquote p {padding: 0!important; margin: 10px 0; line-height: 1.7;}
blockquote cite {display: block; text-align: right; color: #888888; font-size: 0.9em;}

/* ブログカード */
.blog-card {background:#FFF; border:1px solid #fb8c00; word-wrap:break-word; max-width:100%; margin:20px 0px; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}
.blog-card:hover { cursor:pointer; box-shadow:0 10px 20px -5px rgba(0, 0, 0, .2); -moz-transform:translateY(-2px); -webkit-transform:translateY(-2px); transform:translateY(-2px);}
.blog-card:before {font-family:FontAwesome; line-height: 24px; position:absolute; padding:2px 6px; content:"\f02e  あわせて読みたい"; background-color:#fb8c00; color:#FFF; font-size:.8em; z-index:1;}
.blog-card a {display:block; border:none; padding: 10px;}
.blog-card a:hover {border:none;}
.blog-card-thumbnail {width:23%; display:table-cell; vertical-align:middle;}
.blog-card-thumbnail img { padding:0; width: 100%;}
.blog-card-content { display:table-cell; vertical-align:middle; padding: 0 0 0 10px;}
.blog-card-title { font-size:1.5rem; text-align: left; font-weight:bold; line-height:1.4; padding:0 5px;}
.blog-card-excerpt { font-size:1.4rem; color:#4c4c4c; margin:5px 0 0; padding: 5px 0 0; line-height:1.7; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; border-top: 1px solid #333;}
.blog-card .clear {clear: both;}
@media screen and (max-width:450px) {
  .blog-card:before { line-height: 17px;}
  .blog-card a { display: flex; align-items: center; padding: 30px 10px 10px;}
  .blog-card-thumbnail { width: 100%; min-width: 60px;}
  .blog-card-thumbnail img { object-fit: contain;}
}

.kaitori_blog .blog_list { border-bottom: 1px solid #333; padding: 0 0 20px; margin: 0 0 30px;}
.kaitori_blog .blog_list:hover{ opacity: 0.7;}
.kaitori_blog .blog-thumbnail{ width: 25%; display: table-cell; padding: 0 20px 0 0;}
.kaitori_blog .blog-thumbnail img{ width: 100%; height: auto;}
.kaitori_blog .blog-content{ display: table-cell; vertical-align: middle;}
.kaitori_blog .blog-ttl{ color: #333; font-weight: bold; font-size: 2rem; line-height: 1.4; border-bottom: 1px solid #333; padding: 0 0 10px; text-align: left;}
.kaitori_blog .blog-excerpt{ color: #333; font-size: 1.5rem; margin: 10px 0 0; line-height: 1.6; text-align: left;}
@media screen and (max-width: 991px) {
  .kaitori_blog .blog-thumbnail{ width: 30%; padding: 0 10px 0 0;}
  .kaitori_blog .blog-ttl{ font-size: 1.8rem;}
  .kaitori_blog .blog-excerpt{ font-size: 1.4rem;}
}
@media screen and (max-width: 550px) {
  .kaitori_blog .blog-ttl{ font-size: 1.4rem; padding: 0 0 5px;}
  .kaitori_blog .blog-excerpt{ margin: 5px 0 0; overflow: hidden; height: 60px; letter-spacing: 0; font-size: 1.3rem;}
}

/* ブログの表 */
.blog-table{ border-collapse: collapse; line-height: 1.3; margin: 0 auto 20px;}
.blog-table tr:nth-child(odd){ background-color: #F5EAEA;}
.blog-table th{ background-color: #C8262A; text-align: center; color: #FFF;}
.blog-table th,.blog-table td{ border: 1px solid #C8262A; padding: 5px 10px;}
.blog-table td{ text-align: initial; vertical-align: middle;}
@media screen and (max-width: 767px) {
.blog-table th,.blog-table td{ padding: 5px;}
.blog-table td{ font-size: 13px;}
}

/* 誘導メニュー */
.gold_induction{ background: #FFFAEA; border: 2px solid #F2C022; padding: 15px 20px 20px; line-height: 1.4; margin: 20px 0;}
.gold_induction_ttl{ font-size: 18px; font-weight: bold; text-align: center; padding: 0 0 10px;}
.gold_induction_txt{ text-align: center; padding: 0 0 15px;}
@media screen and (max-width: 767px) {
  .gold_induction{ padding: 10px 10px 15px;}
  .gold_induction_ttl{ font-size: 16px;}
  .gold_induction_txt{ font-size: 13px;}
  .gold_induction .purchase-method_con{ flex-wrap: nowrap;}
  .gold_induction .purchase-method_btn{ display: flex; flex-direction: column; justify-content: center;}
  .gold_induction .purchase-method_btn{ font-size: 16px; margin: 0; padding: 10px 20px 7px 10px; max-width: 49%;}
  .gold_induction .purchase-method_btn.shop_btn span{ display: none;}
  .gold_induction .purchase-method_btn p{ padding: 0; display: contents!important;}
}
@media screen and (max-width: 535px) {
  .gold_induction .purchase-method_btn{ margin: 0 0 10px;}
}
@media screen and (max-width: 330px) {
  .gold_induction .purchase-method_con{ flex-wrap: wrap;}
  .gold_induction .purchase-method_btn{ max-width: none;}
  .gold_induction .purchase-method_btn.delivery_btn{ padding: 5px 20px 5px 10px; line-height: 1;}
}

/* ブログカテゴリー */
.blog-category{
  margin: 0 0 50px;
}
.blog-category ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 2%;
}
.blog-category ul li{
  width: 32%;
  background: #F7F1E8;
  border: 1px solid #E5DCCF;
  border-radius: 6px;
  transition: .3s all;
}
.blog-category ul li:hover{
  background: #E5DCCF;
}
.blog-category ul li a{
  color: #644D2B;
  display: flex;
  align-items: center;
  height: 45px;
  padding: 0 15px;
}