/*
xs  ～575px  なし  スマホ
sm  576px～  @media (min-width:576px)  大きめスマホ
md  768px～  @media (min-width:768px)  タブレット
lg  992px～  @media (min-width:992px)  小さいPC
xl  1200px～ @media (min-width:1200px) PC
xxl 1400px～ @media (min-width:1400px) 大画面
*/
body.topcool{
    font-family:"Yu Gothic","YuGothic","Hiragino Sans","ヒラギノ角ゴシック",Meiryo,sans-serif;
    font-weight: 500;
}

body.topcool #sp-top-bar .sp-module {display: inline-block;margin: 0 ;}
body.topcool #sp-main-body{padding:10px 0 50px 0;}

body.topcool .sp-break {display: none;}
@media (max-width: 768px) {body.topcool .sp-break {display: inline;}}

body.topcool .slogan h1 {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  letter-spacing: 0.08em;
  text-align: center;
  color: #222;
  position: relative;
  display: inline-block;
  padding-bottom: 0.6rem;
}

body.topcool .slogan h1::after {
  content: "";
  display: block;
  height: 3px;
  background: #6cb4e4;
  margin: 0.3rem auto 0;
  border-radius: 2px;
}

body.topcool.layout-blog .lp-module h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F89DB;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
@media(min-width: 768px){
body.topcool.layout-blog .lp-module h2{font-size: 1.4rem;}
}

body.topcool .articleBody h2 {
    line-height: normal;
  /*  width: 100%;*/
    margin: 0.6rem 0 0.4rem 0;
    padding: 0.2em 0 0.2em 1.4em;
    border: 1px solid     rgba(142, 220, 74, 0);
    background: linear-gradient(
      to right,
        rgba(142, 220, 74, 0.55) 0%,
        rgba(89, 192, 21, 0.45) 50%,
        rgba(60, 138, 14, 0.40) 100%
    );
    background-repeat: no-repeat;
    background-size: 0.9em 100%;



    font-size: 1.1rem;
    font-weight: bold;
  /*  scroll-margin-top: 6rem;*/
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.card-item{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  overflow:hidden;
  transition:all .2s ease;
}

.card-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}


body.topcool h3.item-title{font-size: 1.3rem;font-weight: 700;margin: 0;padding:0.5rem 0 0 0;color: var(--text-color);}
@media(max-width:575px){
  body.topcool h3.item-title{font-size: 1.2rem;}
}

/*article*/
body.topcool .articleBody h1{font-size:1.75rem; font-weight: 800;}
body.topcool .articleBody h3{font-size:1rem;}

.left-wrapper{
  flex:0 0 60%;
}

.right-wrapper{
  flex:0 0 40%;
}

.right-wrapper img{
  width:100%;
  height:auto;
}
@media (max-width:768px){

.wrapper{
  flex-direction:column;
}

.left-wrapper,
.right-wrapper{
  flex:unset;
  width:100%;
}

}

.specification{
    border-collapse: separate;
}

.specification thead th{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}


.fixed-td, .top-colleft{
    position: sticky;
    left:0;
    background:#fff;
    z-index:9;
}

.top-colleft.fixed-td{
    position: sticky;
    left:0;
    top:0;
    background:#fff;
    z-index:999;
}

.tbl_container{
    max-height:70vh;
    overflow:auto;
}

body.topcool table th.top-col,
body.topcool table td.fixed-td
{white-space: nowrap;}
body.topcool .table{
  --bs-table-striped-bg : rgba(242, 246, 252, 1);
--bs-table-bg: #FFF;
}

.my-article-gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
}
@media(min-width:992px){
  .my-article-gallery{
  grid-template-columns:repeat(3,1fr);
  }
}


.my-article-gallery img{
width:100%;
height:100%;
object-fit:cover;
aspect-ratio:1/1;
}

body.topcool .gslide-description{display: none;}

/*article*/

/*footer*/
/*footer*/
body.topcool #sp-bottom a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
/*footer*/

/*EC module*/
.ec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media(min-width: 992px){
body.topcool .ec-grid {grid-template-columns: repeat(3, 1fr);}
}

.ec-card {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  text-align: center;
  background: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* スマホ */
@media (max-width: 768px) {
  .ec-grid {
    grid-template-columns: 1fr;
    gap :1rem;
  }
  .ec-card{padding :0.5rem 1rem;}
}


.ec-card h5 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.ec-card p {
  margin: 0;
}

/* CTAだけ強調 */
a.ec-card.ec-cta {
  color: #0F89DB;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  border: 1px solid #0F89DB;
}
/*EC module*/