/************************************
** Theme Name: Puchi-Import_20250907
** Description: プチ輸入HP用テーマ
** Author: Takumi Arakawa
** Version: 1.0
************************************/

/************************************
** グローバル変数宣言
** 2025/7/22
************************************/
:root{--main-back-color: #e6f3ff;--main-back-color-clear: rgba(230, 243, 255, 0.8);--sub-back-color: #cce6ff;--sub-back-color-clear: rgba(255, 255, 255, 0.8);--button-color-1: #0073aa;--button-color-2: #005177;--main-text-color: #0073aa;--blog-shadow: 0 6px 18px rgba(0,0,0,.06);--blog-shadow-hover: 0 10px 26px rgba(0,0,0,.12);--blog-muted: #6b7280;--blog-border: #e5e7eb;--blog-bg: #fff;--max-width-size:800px;--border-radius: 20px;--gap-size-1:20px;--margin-size:20px;--padding-size:20px;--header-height: 60px;--fontsize-large-1: 28px;--fontsize-large-2: 24px;--fontsize-large-3: 22px;--fontsize-large-4: 20px;--fontsize-mid-1: 18px;--fontsize-mid-2: 16px;--fontsize-mid-3: 14px;--fontsize-p-1: 12px;--fontsize-p-2: 10px;}
h1{font-size: var(--fontsize-large-1);}
h2{font-size: var(--fontsize-large-2);}
h3{font-size: var(--fontsize-mid-1);}
p{font-size: var(--fontsize-mid-3);}
@media screen and (max-width: 768px){h1{font-size: var(--fontsize-large-4);}}
@media screen and (max-width: 768px){h2{font-size: var(--fontsize-large-4);}}
@media screen and (max-width: 768px){h3{font-size: var(--fontsize-mid-2);}}
@media screen and (max-width: 768px){p{font-size: var(--fontsize-p-1);}}

/************************************
** メイン デザイン
** 2025/5/3
************************************/
.body-main{background-image: url('assets/img/images_india/unsplash_india-1.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;transition: background-image 1s ease-in-out;font-family: Arial, sans-serif;margin: 0;padding: 0;width: 100%;min-height: 60svh;padding-top: var(--header-height);}
.body-main>.wrapper{min-height: 100vh;display: flex;flex-direction: column;}
.index-main{display: flex;flex-flow: column;align-items: center;padding-inline: 20px;}
.index-main>.hero,.index-main>.index-section,.index-main>.index-swiper,.index-main>.index-relational-main,.index-main>.index-faq-main{width: 100%;max-width: var(--max-width-size);margin-inline: auto;padding-inline: 10px;border-radius: var(--border-radius);box-sizing: border-box;}
.index-main>.hero{padding-top: 20px;padding-bottom: 20px;text-align: center;}
.index-main>.hero>.hero-overlay{background: var(--sub-back-color-clear);display: inline-block;padding: 40px 30px;border-radius: var(--border-radius);margin: auto;}
.index-main>.hero>.hero-overlay>h1{margin-bottom: 20px;}
.index-main>.hero>.hero-overlay>p{margin-bottom: 15px;}
.index-main>.index-section{background: var(--sub-back-color-clear);margin-bottom: 20px;padding-block: 10px;}
.index-main>.index-section>h2{text-align: center;}
.index-main>.index-section>p{text-align: center;}
.index-main>.index-swiper{padding-bottom: 20px;background: var(--sub-back-color-clear);margin-bottom: 20px;height: auto;}
.index-main>.index-swiper>h2{margin-top: 10px;text-align: center;}
.index-main>.index-swiper>p{text-align: center;}
.index-main>.index-swiper>.swiper-wrapper{padding-top: 20px;}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide{display: flex;align-items: center;justify-content: center;flex-flow: column;height: 250px;margin-left: 10px;margin-right: 10px;padding-bottom: 10px;border-radius: var(--border-radius);}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>h3{margin-bottom: 0;}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>p{padding-left: 5px;margin-top: 0;font-size: var(--fontsize-p-2);}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>a{display: block;height: 100%;margin-bottom: 0;position: relative;}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>a>img{height: 100%;margin-bottom: 0;border-radius: var(--border-radius);}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>a>.caption{position: absolute;bottom: 0;left: 0;padding: 10px;background: rgba(0,0,0,0.6);color: #fff;font-size: var(--fontsize-p-1);text-align: center;opacity: 0;transform: translateY(100%);transition: all 0.3s ease;border-radius: 0 0 var(--border-radius) var(--border-radius);}
.index-main>.index-swiper>.swiper-wrapper>.swiper-slide>a:hover .caption{opacity: 1;transform: translateY(0);}
.index-main>.index-relational-main{background: var(--sub-back-color-clear);margin: 0 auto;margin-bottom: 20px;padding-bottom: 20px;padding-inline: 0;}
.index-main>.index-relational-main>h2{text-align: center;}
.index-main>.index-relational-main>p{text-align: center;padding-inline: 20px;}
.index-main>.index-relational-main>.page-relational-section
{
  gap: 10px;
  padding: 20px;
  max-width: var(--max-width-size);
  box-sizing: border-box;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.index-main>.index-relational-main>.page-relational-section>div>a>h2{font-size: var(--fontsize-mid-2);padding-left: 20px;margin-top: 0;}
.index-main>.index-relational-main>.page-relational-section>div>img{text-align: center;}
.index-main>.index-relational-main>.page-relational-section>div>p{padding-left: 20px;max-width: 550px;}
.index-main>.index-relational-main>.color-1{border: 2px solid var(--sub-back-color);background-color: var(--main-back-color);}
.index-main>.index-relational-main>.color-2{border: 2px solid var(--sub-back-color);background-color: var(--sub-back-color);}
.index-main>.index-faq-main{background: var(--sub-back-color-clear);box-sizing: border-box;max-width: var(--max-width-size);margin: 0 auto;margin-bottom: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;}
.index-main>.index-faq-main>h2{font-weight: bold;text-align: center;padding-left: 40px;padding-right: 40px;}
.index-main>.index-faq-main>.page-faq-section{display: inline-block;background-color: var(--main-back-color);width: 100%;max-width: var(--max-width-size);margin: 0 auto;}
.index-main>.index-faq-main>.page-faq-section>.accordion{cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: bold;margin-left: 20px;margin-right: 20px;}
.index-main>.index-faq-main>.page-faq-section>.accordion>h3{font-size: var(--fontsize-mid-2);font-weight: bold;text-align: left;text-decoration: underline;}
.index-main>.index-faq-main>.page-faq-section>.accordion:after{content: '▼';font-size: var(--fontsize-mid-2);transition: transform 0.3s ease;}
.index-main>.index-faq-main>.page-faq-section>.accordion.active:after{transform: rotate(180deg);}
.index-main>.index-faq-main>.page-faq-section>.panel{display: none;justify-content: center;background: #fff;border-top: none;margin-left: 20px;margin-right: 20px;margin-bottom: 10px;padding: 10px;}
.index-main>.index-faq-main>.page-faq-section>.panel.open{display: block;}
.index-main .button{display: inline-block;padding: 10px 20px;background: var(--button-color-1);color: white;text-decoration: none;border-radius: 5px;margin-top: 20px;}
.index-main .button:hover{background: var(--button-color-2);}
.flow-list{list-style: none;margin: 24px 0 0;padding: 0;counter-reset: flow;border-top: 1px solid var(--blog-border, #e5e7eb);}
.flow-list>.flow-item{display: grid;grid-template-columns: 1fr 300px;gap: 10px;align-items: center;padding: 24px 0;border-bottom: 1px solid var(--blog-border, #e5e7eb);}
.flow-list>.flow-item>.flow-body{padding-inline: 20px;}
.flow-list>.flow-item>.flow-body>.flow-step{font-size: var(--fontsize-mid-2);font-weight: 700;letter-spacing: .08em;color: var(--accent, #0ea5e9);margin: 0 0 4px;}
.flow-list>.flow-item>.flow-body>.flow-title{font-weight: 800;line-height: 1.35;margin: 0 0 8px;padding-left: 30px;}
.flow-list>.flow-item>.flow-body>.flow-text{margin: 0;padding-left: 30px;}
.flow-list>.flow-item>.flow-body .flow-button{background: var(--button-color-1);color: white;text-decoration: none;}
.flow-list>.flow-item>.flow-body .flow-button:hover{background: var(--button-color-2);}
.flow-list>.flow-item .flow-visual{text-align: center;}
.flow-list>.flow-item .flow-visual>img{width: 180px;height: 180px;object-fit: cover;aspect-ratio: 1 / 1;border-radius: 9999px;background: #f9fafb;border: 4px solid #eef2f7;display: inline-block;}
.flow-list>.flow-item .flow-visual>figcaption{margin-top: 8px;font-weight: 700;font-size: 0.95rem;color: #3b82f6;}
.flow-list>.flow-item.reverse{grid-template-columns: 300px 1fr;}
.flow-list>.flow-item.reverse>.flow-body{order: 2;}
.flow-list>.flow-item.reverse>.flow-visual{order: 1;}
@media screen and (max-width: 768px){.index-main>.hero>.hero-overlay>h1{margin-bottom: 20px;}}
@media screen and (max-width: 768px){.index-main>.hero>.hero-overlay>p{margin-bottom: 15px;}}
@media screen and (max-width: 768px){.index-main>.index-section>h2{text-align: center;}}
@media screen and (max-width: 768px){.index-main>.index-section>p{text-align: center;}}
@media screen and (max-width: 880px){.index-main>.index-relational-main>.page-relational-section{flex-direction: column;align-items: center;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main{background: var(--sub-back-color-clear);box-sizing: border-box;max-width: var(--max-width-size);margin: 0 auto;margin-bottom: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>h2{font-weight: bold;text-align: center;padding-left: 40px;padding-right: 40px;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section{display: inline-block;background-color: var(--main-back-color);width: 100%;max-width: var(--max-width-size);margin: 0 auto;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.accordion{cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: bold;margin-left: 20px;margin-right: 20px;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.accordion>h3{font-size: var(--fontsize-mid-2);font-weight: bold;text-align: left;text-decoration: underline;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.accordion:after{content: '▼';font-size: var(--fontsize-mid-2);transition: transform 0.3s ease;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.accordion.active:after{transform: rotate(180deg);}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.panel{display: none;justify-content: center;background: #fff;border-top: none;margin-left: 20px;margin-right: 20px;margin-bottom: 10px;padding: 10px;}}
@media screen and (max-width: 768px){.index-main>.index-faq-main>.page-faq-section>.panel.open{display: block;}}
@media screen and (max-width: 768px){.index-main .button{display: inline-block;padding: 10px 20px;background: var(--button-color-1);color: white;text-decoration: none;border-radius: 5px;margin-top: 20px;}}
@media screen and (max-width: 768px){.index-main .button:hover{background: var(--button-color-2);}}
@media screen and (max-width: 768px){.flow-list>.flow-item{grid-template-columns: 1fr;gap: 12px;}}
@media screen and (max-width: 768px){.flow-list>.flow-item .flow-visual{order: 2;margin-bottom: 6px;}}
@media screen and (max-width: 768px){.flow-list>.flow-item .flow-visual>img{width: 160px;height: 160px;border-width: 3px;}}
@media screen and (max-width: 768px){.flow-list>.flow-item.reverse{grid-template-columns: 1fr;}}
@media screen and (max-width: 768px){.flow-list>.flow-item.reverse>.flow-body{order: 1;}}
@media screen and (max-width: 768px){.flow-list>.flow-item.reverse>.flow-visual{order: 2;}}

/************************************
** Header デザイン
** 2025/5/3
************************************/
.header-main{background-color: var(--main-back-color);box-sizing: border-box;position: fixed;top: 0;height: var(--header-height);width: 100%;z-index: 1000;}
.header-main>.header-wrapper{max-width: 1080px;height: 100%;margin-inline: auto;display: flex;flex-flow: row wrap;align-items: center;justify-content: space-between;}
.header-main>.header-wrapper>.toolbar-logo{padding-left: 100px;}
.header-main>.header-wrapper>.toolbar-logo img{height: 40px;}
.header-main>.header-wrapper>.toolbar-hamburger{display: none;flex-flow: column;align-items: center;justify-content: start;}
.header-main>.header-wrapper>.toolbar-hamburger>.menu-toggle{display: none;font-size: 28px;background: none;border: none;cursor: pointer;}
.header-main>.header-wrapper>nav>.nav-links{display: flex;gap: 30px;list-style: none;padding: 0;margin: 0;}
.header-main>.header-wrapper>nav>.nav-links li a{display: inline-block;font-size: var(--fontsize-mid-2);font-weight: bold;border-bottom: 3px solid #000;border-top: 3px solid #000;text-decoration: none;color: #000;transition: 0.2s ease;}
.header-main>.header-wrapper>nav>.nav-links li a:hover{border-color: var(--main-text-color);transform: translateY(-5px);}
@media screen and (max-width: 1080px){.header-main>.header-wrapper{justify-content: space-between;flex-wrap: nowrap;padding-right: 0px;padding-left: 10px;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>.toolbar-logo{padding-left: 0px;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>nav>.nav-links{position: fixed;top: var(--header-height);left: 0;right: 0;height: calc(100dvh - var(--header-height));background: var(--main-text-color);color: #fff;display: none;flex-direction: column;gap: 0;overflow-y: auto;z-index: 1100;padding: 8px 0;margin: 0;list-style: none;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>nav>.nav-links>li a{display: block;padding: 16px 20px;color: #fff;text-decoration: none;border: 0;transition: background .2s ease;border-bottom: 2px solid rgba(255,255,255,.20);}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>nav>.nav-links>li a:hover{background: rgba(255,255,255,.12);transform: none;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>nav>.nav-links.open{display: flex;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>.toolbar-hamburger{display: flex;margin-left: auto;gap: 10px;}}
@media screen and (max-width: 1080px){.header-main>.header-wrapper>.toolbar-hamburger>.menu-toggle{display: block;font-size: 28px;background: none;border: none;cursor: pointer;}}

/************************************
** Footer デザイン
** 2025/7/22
************************************/
.footer-main{background-color: var(--main-back-color);width: 100%;padding-bottom: 0;margin-bottom: 0;border-top: 1px solid #ddd;font-size: var(--fontsize-mid-3);color: #333;padding-inline: 30px;padding-top: 10px;box-sizing: border-box;}
.footer-main>.footer-inner{display: flex;justify-content: space-between;align-items: center;max-width: 1080px;margin: 0 auto 5px;flex-wrap: wrap;}
.footer-main>.footer-inner .footer-left{flex: 1;}
.footer-main>.footer-inner .footer-left .footer-title{font-size: var(--fontsize-mid-2);font-weight: 700;margin: 0 0 5px;}
.footer-main>.footer-inner .footer-left .footer-sub{margin: 0;color: #666;}
.footer-main>.footer-inner .footer-right{flex: 1;text-align: right;}
.footer-main>.footer-inner .footer-right .footer-links{list-style: none;padding: 0;margin: 0;}
.footer-main>.footer-inner .footer-right .footer-links li{display: inline-block;margin-left: 15px;}
.footer-main>.footer-inner .footer-right .footer-links a{text-decoration: none;color: #0073aa;transition: color 0.3s;}
.footer-main>.footer-inner .footer-right .footer-links a:hover{color: #005580;}
.footer-main .footer-bottom{border-top: 1px solid #ddd;padding-top: 0px;text-align: center;}
.footer-main .footer-bottom>.copy{font-size: var(--fontsize-p-2);color: var(--main-text-color);}
@media screen and (max-width: 768px){.footer-main > .footer-inner{flex-direction: column;align-items: center;text-align: center;gap: 15px;}}
@media screen and (max-width: 768px){.footer-main > .footer-inner>.footer-left,.footer-main > .footer-inner>.footer-right{flex: none;width: 100%;text-align: center;}}
@media screen and (max-width: 768px){.footer-main > .footer-inner>.footer-right>.footer-links{display: flex;justify-content: center;gap: 15px;align-items: center;padding: 0;margin: 0;}}
@media screen and (max-width: 768px){.footer-main > .footer-inner>.footer-right>.footer-links>li{display: inline-flex;margin: 0;}}

/************************************
** 価格 デザイン
** 2025/7/22
************************************/
.page-shipping-main
{
  background-color:  var(--main-back-color);
  box-sizing: border-box;
  max-width: var(--max-width-size);
  margin: 0 auto;
  margin-top: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  flex: 1;}
.page-shipping-main>.page-shipping-view{padding-left: 20px;padding-right: 20px;gap: 10px;}
.page-shipping-main>.page-shipping-view>h1{text-align: center;text-decoration: underline;}
.page-shipping-main>.page-shipping-view>.text-1{text-align: center;font-size: var(--fontsize-mid-2);}
.page-shipping-main>.page-shipping-view>.text-2{text-align: left;padding-left: 40px;font-size: var(--fontsize-mid-2);}
.page-shipping-main>div{box-sizing: border-box;padding-left: 20px;padding-right: 20px;width: 100%;max-width: var(--max-width-size);display: flex;flex-direction: row wrap;justify-content: center;}
.page-shipping-main>div>.page-shipping-section{border: 2px solid var(--sub-back-color);background-color:  var(--main-back-color);box-sizing: border-box;padding-left: 20px;padding-right: 20px;width: 100%;min-width: 300px;max-width: var(--max-width-size);}
.page-shipping-main>div>.page-shipping-section>h2{text-align: center;text-decoration: underline;}
.page-shipping-main>div>.page-shipping-section>.text-1{text-align: center;font-size: var(--fontsize-mid-2);}
.page-shipping-main>div>.page-shipping-section>.text-2{text-align: left;padding-left: 40px;font-size: var(--fontsize-mid-2);}
.page-shipping-main>div>.page-shipping-section>.table{border-collapse: collapse;text-align: center;width: 100%;}
.page-shipping-main>div>.page-shipping-section>.table th,.page-shipping-main>div>.page-shipping-section>.table td{background-color: white;border: 2px solid black;}
.page-shipping-main>div>.color-1{border: 2px solid var(--sub-back-color);background-color:  var(--main-back-color);}
.page-shipping-main>div>.color-2{border: 2px solid var(--sub-back-color);background-color:  var(--sub-back-color);}
@media screen and (max-width: 768px){.page-shipping-main {margin-inline: 10px;}}
@media screen and (max-width: 768px){.page-shipping-main>div{display: flex;flex-direction: column;justify-content: center;}}

/************************************
** 注文約款 デザイン
** 2025/7/24
************************************/
.page-order-main{background-color:  var(--main-back-color);box-sizing: border-box;max-width: var(--max-width-size);margin: 0 auto;margin-top: 20px;padding-top: 20px;margin-bottom: 20px;padding-bottom: 20px;flex: 1;}
.page-order-main>.page-order-view{background-color:  var(--main-back-color);gap: 10px;padding: 10px;width: 100%;max-width: var(--max-width-size);height: auto;box-sizing: border-box;margin: 0 auto;}
.page-order-main>.page-order-view>.comment-1{font-size: var(--fontsize-mid-2);font-weight: normal;text-align: center;}
.page-order-main>.page-order-view>h1{font-weight: bold;text-align: center;padding-left: 40px;padding-right: 40px;text-decoration: underline;}
.page-order-main>.page-order-view>h2{font-weight: bold;text-align: left;padding-left: 40px;padding-right: 40px;}
.page-order-main>.page-order-view p{font-weight: normal;text-align: left;padding-left: 40px;padding-right: 40px;}
@media screen and (max-width: 768px){.page-order-main{margin-inline: 10px;}}
@media screen and (max-width: 768px){.page-order-main>.page-order-view{padding: 5px;}}
@media screen and (max-width: 768px){.page-order-main>.page-order-view>.comment-1{font-size: var(--fontsize-p-1);}}
@media screen and (max-width: 768px){.page-order-main>.page-order-view>h1{font-weight: bold;text-align: center;padding-left: 40px;padding-right: 40px;text-decoration: underline;}}
@media screen and (max-width: 768px){.page-order-main>.page-order-view>h2{font-weight: bold;text-align: left;padding-left: 40px;padding-right: 40px;}}
@media screen and (max-width: 768px){.page-order-main>.page-order-view p{padding-left: 5px;padding-right: 5px;}}

/************************************
** 問い合わせページのデザイン
** 2025/5/3
************************************/
.page-contact-main
{
  background-color:  var(--main-back-color);
  box-sizing: border-box;
  max-width: var(--max-width-size);
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  flex: 1;}
.page-contact-main>h1{text-align: center;text-decoration: underline;}
.page-contact-main>p{padding-left: 20px;text-align: center;}
.page-contact-main>.page-contact-success{text-align: center;font-size: var(--fontsize-mid-2);color: red;}
.page-contact-main>.page-contact-failue{text-align: center;font-size: var(--fontsize-mid-2);color: red;}
.page-contact-main>.page-contact-form
{
  background-color:  var(--main-back-color);
  box-sizing: border-box;
  gap: 10px;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
  max-width: var(--max-width-size);
  display: flex;
  flex-flow: column wrap;
  justify-content: left;}
.page-contact-main>.page-contact-form>div>label{font-weight: bold;margin-top: 10px;display: block;}
.page-contact-main>.page-contact-form>div>input,.page-contact-main>.page-contact-form>div>textarea{box-sizing: border-box;width: 100%;padding: 10px;margin-top: 5px;margin-bottom: 15px;border: 1px solid #ccc;border-radius: 5px;resize: none;overflow: auto;}
.page-contact-main>.page-contact-form>div>button{padding: 10px 20px;background-color: #0073aa;color: white;border: none;border-radius: 5px;cursor: pointer;}
.page-contact-main>.page-contact-form>div>button:hover{background-color: #005177;}
@media screen and (max-width: 768px){.page-contact-main{width: auto; margin-inline: 10px;}}

/************************************
** ブログ一覧 style
** 2025/8/12
************************************/
.blog-main
{
  background-color: var(--main-back-color);
  max-width: var(--max-width-size);
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  flex: 1;}
.blog-main>h1{text-align: center;margin: 0 0 20px;}
.blog-main>.blog-list{display: grid;grid-template-columns: repeat(3, minmax(0,1fr));gap: var(--gap-size-1);list-style: none;padding: 0;margin: 0 0 28px;}
.blog-main>.blog-list>li>.blog-itemcard{display: block;background: var(--blog-bg);border: 1px solid var(--blog-border);border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--blog-shadow);text-decoration: none;color: inherit;transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;padding-bottom: 16px;}
.blog-main>.blog-list>li>.blog-itemcard>.thumb{aspect-ratio: 16 / 9;background: rgb(193, 203, 206);overflow: hidden;}
.blog-main>.blog-list>li>.blog-itemcard>.thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}
.blog-main>.blog-list>li>.blog-itemcard:hover{transform: translateY(-2px);box-shadow: var(--blog-shadow-hover);border-color: rgba(30,136,229,.35);}
.blog-main>.blog-list>li>.meta{display: flex;gap: 12px;align-items: center;padding-top: 14px;font-size: var(--fontsize-p-1);padding: 0 16px;}
.blog-main>.blog-list>li>.meta .cats a{display: inline-block;font-size: var(--fontsize-p-1);line-height: 1;padding: 6px 8px;border-radius: 999px;background: #eef5ff;text-decoration: none;}
.blog-main>.blog-list>li>.meta .cats a + a{margin-left: 6px;}
.blog-main>.blog-list>li>.post-title{margin: 10px 0 8px;font-size: var(--fontsize-mid-2);line-height: 1.35;font-weight: 700;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.5em;max-height: 3em;padding: 0 16px;}
.blog-main>.blog-list>li>.excerpt{margin: 0 0 16px;font-size: var(--fontsize-mid-3);line-height: 1.7;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.5em;max-height: 3em;padding: 0 16px;}
.blog-main>.pagination{display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;margin: 12px 0 40px;}
.blog-main>.pagination>a,.blog-main>.pagination>span{min-width: 40px;height: 40px;padding: 0 12px;border-radius: 10px;border: 1px solid var(--blog-border);display: inline-flex;align-items: center;justify-content: center;text-decoration: none;color: #111827;background: #fff;transition: background .15s ease, border-color .15s ease, color .15s ease;}
.blog-main>.pagination>a:hover{border-color: rgba(30,136,229,.35);color: var(--main-text-color);}
.blog-main>.pagination>.current{background: var(--main-text-color);border-color: var(--main-text-color);color: #fff;}
@media screen and (max-width: 768px){.blog-main{width: auto; margin-inline: 10px;}}
@media screen and (max-width: 600px){.blog-main>.blog-list{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media screen and (max-width: 480px){.blog-main>.blog-list{grid-template-columns: 1fr;}}

/************************************
** 単一投稿ページ style
** 2025/8/12
************************************/
.single-post-main{background-color: var(--main-back-color);width: 100%;max-width: var(--max-width-size);margin: 20px auto;padding: 0 16px;margin-bottom: 20px;padding-bottom: 20px;flex: 1;}
.single-post-main>.breadcrumb{gap: 10px;}
.single-post-main>article>header{margin-bottom: 32px;border-bottom: 1px solid var(--blog-border);padding-bottom: 16px;}
.single-post-main>article>header>h1{font-weight: 800;margin: 0 0 12px;line-height: 1.3;}
.single-post-main>article>header>.post-meta{font-size: var(--fontsize-mid-3);color: var(--blog-muted);display: flex;flex-wrap: wrap;gap: 12px;}
.single-post-main>article>header>.post-meta .cats a{display: inline-block;font-size: var(--fontsize-p-1);padding: 5px 8px;border-radius: 999px;background: #eef5ff;color: var(--main-text-color);text-decoration: none;}
.single-post-main>article>header .post-thumb{margin: 20px 0 32px;border-radius: var(--border-radius);overflow: hidden;box-shadow: var(--blog-shadow);}
.single-post-main>article>header .post-thumb img{width: 100%;height: auto;display: block;object-fit: cover;}
.single-post-main>article>.post-content{font-size: var(--fontsize-mid-2);line-height: 1.85;color: #1f2937;}
.single-post-main>article>.post-content>p{margin-bottom: 1.4em;}
.single-post-main>article>.post-content>h2{font-weight: 700;margin-top: 2em;margin-bottom: .8em;line-height: 1.4;border-left: 4px solid var(--main-text-color);padding-left: .5em;}
.single-post-main>article>.post-content>h3{font-weight: 700;margin-top: 2em;margin-bottom: .8em;line-height: 1.4;}
.single-post-main>article>.post-content>h4{font-weight: 700;margin-top: 2em;margin-bottom: .8em;line-height: 1.4;}
.single-post-main>article>.post-content>a{color: var(--main-text-color);text-decoration: underline;}
.single-post-main>article>.post-content>blockquote{margin: 1.6em 0;padding: 1em 1.4em;background: #f9fafb;border-left: 4px solid var(--main-text-color);font-style: italic;color: #374151;}
.single-post-main>article>.post-content>img{max-width: 100%;height: auto;border-radius: 8px;}
.single-post-main>article>.post-content>ul{margin-left: 1.4em;margin-bottom: 1.4em;}
.single-post-main>article>.post-content>ul>li{margin-bottom: .4em;}
.single-post-main>article>footer{border-top: 1px solid var(--blog-border);margin-top: 40px;margin-bottom: 20px;padding-top: 20px;}
.single-post-main>article>footer>div{margin-bottom: 16px;}
.single-post-main>article>footer>div>a{display: inline-block;font-size: var(--fontsize-p-1);background: #eef2f7;padding: 4px 8px;margin: 0 6px 6px 0;border-radius: 6px;color: var(--main-text-color);text-decoration: none;}
.single-post-main>article>footer>div>a:hover{background: var(--main-text-color);color: #fff;}
.single-post-main>article>footer>nav{display: flex;justify-content: space-between;gap: 8px;}
.single-post-main>article>footer>nav a{flex: 1;padding: 10px 14px;border: 1px solid var(--blog-border);border-radius: 8px;text-decoration: none;color: #1f2937;transition: background .15s ease, border-color .15s ease;}
.single-post-main>article>footer>nav a:hover{background: #f3f4f6;border-color: rgba(30,136,229,.35);}
@media screen and (max-width: 768px){.single-post-main{width: auto; margin-inline: 10px;}}