@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@900&display=swap");
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

@media (max-width: 1024px) { body { padding-top: min(80px,11.112vw); } }
@media (max-width: 768px) { body { padding-top: min(80px,11.112vw); font-size: 1.4rem; } }
@media (max-width: 480px) { body { padding-top: min(200px,27.778vw); } }

/*============================================================================
	cheaderFV
=============================================================================*/
#cheaderFV { margin: 0 0 min(60px,8.334vw) auto; width: calc(100vw - calc((100vw - 1200px) / 2)); position: relative; }
#cheaderFV picture { margin: 0; width: 100%; border-radius: 3.4722222222vw 0 0 0; display: block; overflow: hidden; position: relative; }
#cheaderFV picture::before { content: ''; padding-top: 39%; width: 100%; display: block; }
@media (max-width: 768px) { #cheaderFV picture::before { padding-top: 60%; } }
#cheaderFV picture img, #cheaderFV picture source { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; z-index: 0; }
@media (max-width: 1340px) { #cheaderFV { width: 95%; } }
#cheaderFV .titleBox { color: #FFFFFF; position: absolute; top: min(100px,13.888vw); left: min(65px,9.028vw); z-index: 10; }
#cheaderFV .titleBox h1 { margin: 0 auto 15px; font-size: clamp(16px, 4.4448vw, 40px); line-height: 1.4; }
#cheaderFV .titleBox p { font-size: clamp(13px, 3.4vw, 18px); }
#cheaderFV .tencho { margin: auto; width: 12.7777777778vw; height: auto; aspect-ratio: 184 / 244; display: block; position: absolute; top: auto; left: auto; right: 2.5%; bottom: 0; }

/*============================================================================
	columnHeader
=============================================================================*/
#columnHeader { margin: 0 0 min(60px,8.334vw); width: 100%; position: relative; }
#columnHeader::before { content: ''; margin: auto; width: 40%; height: 100%; background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); mix-blend-mode: multiply; position: absolute; top: 0; left: 0; z-index: 2; }
#columnHeader picture { margin: 0; width: 100%; display: block; overflow: hidden; position: relative; }
#columnHeader picture::before { content: ''; padding-top: 20%; width: 100%; display: block; }
#columnHeader picture img, #columnHeader picture source { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; z-index: 0; }
#columnHeader .titleBox { color: #FFFFFF; position: absolute; top: min(100px,13.888vw); left: min(65px,9.028vw); z-index: 10; }
#columnHeader .titleBox h1 { margin: 0; font-size: clamp(16px, 4.4448vw, 40px); line-height: 1.4; }
@media (max-width: 768px) { #columnHeader picture::before { padding-top: 100px; }
  #columnHeader .titleBox { top: auto; left: 5%; bottom: 20px; } }

/*============================================================================
	flame
=============================================================================*/
#columnWrap { margin: auto; padding: 0 0 min(200px,27.778vw); max-width: 1200px; width: 90%; height: auto; position: relative; }
#columnWrap #columnMainbox { margin: 0 0 0 auto; width: 67.7%; -webkit-order: 2; -moz-order: 2; -ms-order: 2; order: 2; }
#columnWrap #columnSidebar { margin: 0 0 auto; width: 22.8%; position: sticky; top: min(100px,13.888vw); -webkit-order: 1; -moz-order: 1; -ms-order: 1; order: 1; }
@media (max-width: 1024px) { #columnWrap #columnMainbox { width: 100%; -webkit-order: 1; -moz-order: 1; -ms-order: 1; order: 1; }
  #columnWrap #columnSidebar { margin-top: min(60px,8.334vw); width: 100%; position: static; -webkit-order: 2; -moz-order: 2; -ms-order: 2; order: 2; } }

/*============================================================================
	サイドバー
=============================================================================*/
#columnSidebar section { padding: min(20px,2.778vw) min(20px,2.778vw) min(30px,4.166vw); background: #FFF6EA; }
#columnSidebar section h3 { margin: 0 auto min(20px,2.778vw); font-size: clamp(14px, 3.3328vw, 30px); font-weight: 700; line-height: 1.4; text-align: center; }
#columnSidebar section + section { margin-top: min(80px,11.112vw); }
#columnSidebar section ul.ctgbox { margin-left: 1.5em; }
#columnSidebar section ul.ctgbox li { list-style: disc; }
#columnSidebar section ul.ctgbox li + li { margin-top: 10px; }
#columnSidebar section ul.tagBox { display: -webkit-flex; display: -moz-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#columnSidebar section ul.tagBox li { margin: 0 1em 0.4em 0; }
#columnSidebar section ul.tagBox li a { color: #000000; font-size: 1.5rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.backBtn { margin: min(60px,8.334vw) auto 0; width: 100%; max-width: 400px; }
.backBtn a { width: 100%; height: 56px; line-height: 52px; text-align: center; border-radius: 30px; border: 2px solid #ED8046; display: block; position: relative; overflow: hidden; }
@media (max-width: 480px) { .backBtn a { height: 40px; line-height: 38px; } }
.backBtn a span { padding-right: 20px; color: #FFFFFF; font-size: clamp(14px, 2.2224vw, 20px); font-weight: 700; position: relative; z-index: 5; -webkit-transition: all .4s; transition: all .4s; }
.backBtn a span i { margin: auto; width: 12px; height: 12px; border-top: 3px solid #FFFFFF; border-right: 3px solid #FFFFFF; display: block; transform: rotate(45deg); position: absolute; top: 0; left: auto; right: 0; bottom: 0; z-index: 5; -webkit-transition: all .4s; transition: all .4s; }
.backBtn a::before, .backBtn a::after { content: ''; width: 110%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; }
.backBtn a::before { background: #ED8046; }
.backBtn a::after { background: #FFFFFF; transform: scale(0, 1); transform-origin: left; -webkit-transition: all .4s; transition: all .4s; }
.backBtn a:hover::after { transform: scale(1, 1); }
.backBtn a:hover span { color: #ED8046; }
.backBtn a:hover i { border-top: 2px solid #ED8046; border-right: 2px solid #ED8046; }

/*============================================================================
	記事一覧
=============================================================================*/
#columnEntryList .ctgttl { margin: 0 auto min(20px,2.778vw); font-size: clamp(14px, 3.5552vw, 32px); font-weight: 700; }
#columnEntryList .entryCard { padding: min(30px,4.166vw) 0; width: 100%; border-top: 1px solid #c0c0c0; display: -webkit-flex; display: -moz-flex; display: flex; }
#columnEntryList .entryCard:last-of-type { border-bottom: 1px solid #c0c0c0; }
#columnEntryList .entryCard figure { width: 22%; border-radius: 10px; border: 1px solid #c0c0c0; overflow: hidden; position: relative; }
#columnEntryList .entryCard figure::before { content: ''; padding-top: 66.7%; display: block; }
#columnEntryList .entryCard figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; z-index: 0; }
#columnEntryList .entryCard .columnText { margin: 0 0 0 auto; width: 75.4%; }
#columnEntryList .entryCard .columnText .infoBox date { margin: auto 16px auto 0; font-size: 1.4rem; font-weight: 700; display: inline-block; }
#columnEntryList .entryCard .columnText .infoBox .ctg { margin: 0 10px 10px 0; padding: 3px 5px; font-size: 1.5rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: #FFF6EA; display: inline-block; }
#columnEntryList .entryCard .columnText .ttl { margin-top: 16px; font-size: clamp(14px, 2.6672vw, 24px); font-weight: 500; }
@media (max-width: 480px) { #columnEntryList .entryCard { padding: min(50px,6.944vw) 0; display: block; }
  #columnEntryList .entryCard:first-of-type { border: none; }
  #columnEntryList .entryCard figure { margin: 0 auto 10px; width: 80%; }
  #columnEntryList .entryCard .columnText { width: 100%; }
  #columnEntryList .entryCard .columnText .infoBox { display: block; }
  #columnEntryList .entryCard .columnText .infoBox .ctg { font-size: 1.2rem; } }

.pager { margin: min(80px,11.112vw) auto 0; height: auto; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.pager a, .pager span { margin: 0 10px; color: #000000; font-size: clamp(14px, 2.7776vw, 25px); font-weight: 700; line-height: 1.4; display: inline-block; position: relative; }
.pager a.current, .pager span.current { color: #ED8046; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ED8046; }
.pager a.dots, .pager span.dots { border: none; }
.pager a.prev, .pager a.next, .pager span.prev, .pager span.next { text-indent: -9999px; width: 1em; height: 1em; }
.pager a.prev::before, .pager a.next::before, .pager span.prev::before, .pager span.next::before { margin: auto; font-weight: 500; line-height: 0.8; width: 100%; height: 100%; text-indent: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: auto; }
.pager a.prev::before, .pager span.prev::before { content: '\003c'; }
.pager a.next::before, .pager span.next::before { content: '\003e'; }
.pager a:hover::after, .pager span:hover::after { transform: scaleX(1); }
@media (max-width: 768px) { .pager a, .pager span { width: 30px; height: 30px; line-height: 28px; }
  .pager a.current, .pager span.current { width: 40px; height: 40px; line-height: 38px; } }

/*============================================================================
	entry
=============================================================================*/
#entryWrap .entryHeader { margin: 0 auto min(60px,8.334vw); }
#entryWrap .entryHeader h1 { padding-bottom: 10px; font-size: clamp(14px, 3.8896vw, 35px); font-weight: 700; line-height: 1.4; border-bottom: 1px solid #000000; }
@media (max-width: 768px) { #entryWrap .entryHeader h1 { font-size: 2.0rem; } }
#entryWrap .entryHeader .entryInfo { margin: 20px 0 0 0; display: -webkit-flex; display: -moz-flex; display: flex; }
#entryWrap .entryHeader .entryInfo time { width: 100px; display: block; }
#entryWrap .entryHeader .entryInfo .tagslist { margin: 0 0 0 auto; width: calc(100% - 120px); }
#entryWrap .entryHeader .entryInfo .tagslist a { margin: 0 10px 10px 0; padding: 3px 5px; font-size: 1.5rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: #FFF6EA; display: inline-block; }
@media (max-width: 768px) { #entryWrap .entryHeader .entryInfo time { width: 80px; }
  #entryWrap .entryHeader .entryInfo .tagslist { width: calc(100% - 100px); }
  #entryWrap .entryHeader .entryInfo .tagslist a { font-size: 1.2rem; } }
#entryWrap .entryBody { /* カスタムブロック 商品紹介 */ /* カスタムブロック おわりに */ }
#entryWrap .entryBody h2 { margin: min(80px,11.112vw) auto 20px; padding-bottom: 4px; font-size: 3.0rem; font-weight: 700; line-height: 1.4; border-bottom: double 4px #ED8046; }
#entryWrap .entryBody h2:first-of-type { margin: 0 auto 20px; }
#entryWrap .entryBody h3 { margin: 0 auto 10px; font-size: 2.6rem; font-weight: 700; line-height: 1.4; }
#entryWrap .entryBody p + p { margin-top: 1em; }
#entryWrap .entryBody .wp-block-image { margin: min(40px,5.556vw) auto; }
#entryWrap .entryBody .wp-block-list { margin: min(40px,5.556vw) auto; }
#entryWrap .entryBody .wp-block-list li { padding-left: 1em; list-style: disc; list-style-position: inside; }
#entryWrap .entryBody .wp-block-list li + li { margin-top: 0.8em; }
#entryWrap .entryBody .ecitemListWrap { margin: min(60px,8.334vw) auto 0; display: -webkit-flex; display: -moz-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#entryWrap .entryBody .ecitemListWrap section { margin: 0 4% min(40px,5.556vw) 0; padding: min(30px,4.166vw); width: 48%; background: #FFF6EA; border-radius: min(20px,2.778vw); }
#entryWrap .entryBody .ecitemListWrap section:nth-of-type(2n) { margin-right: 0; }
#entryWrap .entryBody .ecitemListWrap section h4 { margin: 0 auto 20px; font-size: 1.8rem; font-weight: 700; }
#entryWrap .entryBody .ecitemListWrap section figure { margin: 0 auto 20px; width: 100%; }
#entryWrap .entryBody .ecitemListWrap section .ecbtn { margin: 20px auto 0; width: 90%; }
#entryWrap .entryBody .ecitemListWrap section .ecbtn a { width: 100%; height: 40px; line-height: 40px; text-align: center; background: #ED8046; border-radius: 30px; display: block; }
#entryWrap .entryBody .ecitemListWrap section .ecbtn a span { color: #FFFFFF; font-weight: 700; }
#entryWrap .entryBody .ecitemListWrap section .ecbtn a:hover { opacity: 0.4; }
#entryWrap .entryBody .conclusionBox { margin: min(60px,8.334vw) auto 0; padding: min(30px,4.166vw); border-radius: min(20px,2.778vw); border: 2px solid #ED8046; }
#entryWrap .entryBody .conclusionBox p + p { margin-top: 1em; }
@media (max-width: 768px) { #entryWrap .entryBody h2 { font-size: 2.0rem; }
  #entryWrap .entryBody h3 { font-size: 1.6rem; }
  #entryWrap .entryBody .ecitemListWrap { display: block; }
  #entryWrap .entryBody .ecitemListWrap section { margin: 0 0 min(40px,5.556vw); width: 100%; }
  #entryWrap .entryBody .ecitemListWrap section h4 { font-size: 1.6rem; }
  #entryWrap .entryBody .ecitemListWrap section figure { width: 90%; } }
#entryWrap .entryPager { margin: min(100px,13.888vw) auto; }
#entryWrap .entryPager li { width: 48%; height: 26px; position: relative; }
#entryWrap .entryPager li span, #entryWrap .entryPager li a { font-size: clamp(13px, 3.4vw, 18px); font-weight: 500; letter-spacing: 0.02em; line-height: 26px; display: inline-block; }
#entryWrap .entryPager li span::before, #entryWrap .entryPager li a::before { content: ''; margin: auto; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; display: block; position: absolute; top: 0; bottom: 0; }
#entryWrap .entryPager li span { color: #677881; }
#entryWrap .entryPager li a { color: #ED8046; }
#entryWrap .entryPager li.prev { padding-left: 30px; }
#entryWrap .entryPager li.prev span::before { border-right: 10px solid #677881; left: 0; right: auto; }
#entryWrap .entryPager li.prev a::before { border-right: 10px solid #ED8046; left: 0; right: auto; }
#entryWrap .entryPager li.next { padding-right: 30px; text-align: right; }
#entryWrap .entryPager li.next span::before { border-left: 10px solid #677881; left: auto; right: 0; }
#entryWrap .entryPager li.next a::before { border-left: 10px solid #ED8046; left: auto; right: 0; }