@charset "utf-8";
/* ==========================================================================
   freearea.css
   カテゴリページ・商品ページ等のフリーエリア用共通スタイル
   PC/SP共通（メディアクエリ対応）
   ========================================================================== */

.ec-free-template {
   color: #333333;
   line-height: 1.6;
   max-width: 1000px;
   margin: 0 auto;
   padding: 30px 20px;
   box-sizing: border-box;
   background-color: #ffffff; 
   text-align: left;
}
.ec-free-template *, .ec-free-template *::before, .ec-free-template *::after {
   box-sizing: border-box;
}
.ec-free-template p, .ec-free-template ul, .ec-free-template li {
   margin: 0;
   padding: 0;
   list-style: none;
   border: none;
   text-align: left;
   font-size: 14px;
}
.ec-free-template img {
   max-width: 100%;
   height: auto;
   display: block;
}
.ec-free-template h1, .ec-free-template h2, .ec-free-template h3,
.ec-free-template h4, .ec-free-template h5, .ec-free-template h6 {
   margin: 0 0 15px;
   padding: 8px 0;
   border: none;
   font-weight: bold;
   line-height: 1.4;
   text-align: left;
   display: table;
   font-size: 18px;
}
.ec-free-template h5 {
   position: static;
   background-color: transparent;
   border-radius: 0;
}
.ec-free-template h5:after {
   display: none;
}
.ec-free-template .title-main {
   display: block;
   width: 100%;
   font-size: 20px;
   text-align: center;
   margin-bottom: 20px;
}
.ec-free-template .title-balloon {
   display: block;
   position: relative;
   background: #F4E9D5;
   padding: 15px;
   border-radius: 10px;
   text-align: center;
   font-size: 16px;
   margin-bottom: 30px;
}
.ec-free-template .title-balloon::after {
   content: '';
   position: absolute;
   bottom: -15px;
   left: 45px;
   margin-left: -10px;
   border-top: 15px solid #F4E9D5;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
}
.ec-free-template .border-bottom { border-bottom: 1px solid #333333; }
.ec-free-template .border-dotted { border-bottom: 1px dotted #333333; }
.ec-free-template .border-dashed { border-bottom: 2px dashed #333333; }
.ec-free-template strong { color: #d66d75; font-size: 25px; }
.ec-free-template .text-center { text-align: center !important; }
.ec-free-template .mb-20 { margin-bottom: 20px !important; }
.ec-free-template .mb-40 { margin-bottom: 40px !important; }
.ec-free-template .layout-2col {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 40px;
   align-items: flex-start;
}
.ec-free-template .col-text { flex: 1; min-width: 300px; }
.ec-free-template .col-image { flex: 1; min-width: 300px; }
.ec-free-template .layout-grid3 {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   margin-bottom: 40px;
}
.ec-free-template .grid-item { flex: 0 0 calc(33.333% - 10px); }
.ec-free-template .grid-item p { margin-top: 8px; }
.ec-free-template a.layout-card,
.ec-free-template a.layout-card:link,
.ec-free-template a.layout-card:visited {
   display: flex;
   border: 1px solid #c9c9c9;
   margin-bottom: 20px;
   align-items: flex-start;
   padding: 20px;
   gap: 15px;
   background-color: #ffffff;
   text-decoration: none !important;
   color: inherit;
   transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ec-free-template a.layout-card:hover {
   opacity: 0.7;
}
.ec-free-template .card-content { flex: 7; }
.ec-free-template .card-image { flex: 3; }
.ec-free-template .reverse { flex-direction: row-reverse; }
.ec-free-template a.layout-card h1,
.ec-free-template a.layout-card h2,
.ec-free-template a.layout-card h3,
.ec-free-template a.layout-card h4,
.ec-free-template a.layout-card h5,
.ec-free-template a.layout-card h6 {
   margin-bottom: 0;
   font-size: 16px;
}
.ec-free-template .button-link, 
.ec-free-template .button-link:link, 
.ec-free-template .button-link:visited {
   display: inline-block;
   background: #898989;
   color: #ffffff !important;
   padding: 5px 15px;
   text-decoration: none;
   font-size: 13px;
   margin-top: 10px;
   border-radius: 2px;
   text-align: center;
   letter-spacing: 2px;
}
.ec-free-template .line-dashed { border: none; border-bottom: 2px dashed #ad989d; margin: 40px 0; }
.ec-free-template .sp-only { display: none; }

@media (max-width: 768px) {
   .ec-free-template .sp-only { display: block; }
   .ec-free-template { padding: 15px; }
   .ec-free-template .layout-2col { display: flex; flex-direction: column; }
   .ec-free-template .col-text { display: contents; }
   .ec-free-template h1, .ec-free-template h2, .ec-free-template h3,
   .ec-free-template h4, .ec-free-template h5, .ec-free-template h6 { 
         order: 1; margin-bottom: 0; font-size: 20px;
   }
   .ec-free-template .title-main {
         font-size: 18px;
         text-align: left;
   }
   .ec-free-template .col-image { order: 2; width: 100%; min-width: 0; margin-bottom: 0; }
   .ec-free-template .col-text p { order: 3; width: 100%; }
   .ec-free-template .grid-item { flex: 0 0 calc(50% - 8px); }
   .ec-free-template .layout-card { padding: 10px; }
   .ec-free-template .layout-card h1, .ec-free-template .layout-card h2, .ec-free-template .layout-card h3,
   .ec-free-template .layout-card h4, .ec-free-template .layout-card h5, .ec-free-template .layout-card h6 { 
         font-size: 15px; margin-bottom: 5px; 
   }
   .ec-free-template a.layout-card,
   .ec-free-template a.layout-card:link,
   .ec-free-template a.layout-card:visited {
         padding: 15px;
   }
}