/***** layout *****/

.ec-mainVisual,
.ec-recommend,
.ec-role {
  padding-inline: 0;
}

.ec-layoutRole__contentTop,
.ec-layoutRole__contents {
  padding-inline: 8px;
}

.navbar {
  padding-block: 5px;
}

.container > .navbar-header {
  margin-inline: 0;
}

@media (min-width: 768px) {
  .ec-layoutRole__mainTop {
    padding-inline: 8px;
  }
}

header {
  height: revert;
}

/* 左サイドメニューをSP時は反転 */
@media (max-width: 768px) {
  .ec-layoutRole__contents {
    display: flex;
    flex-direction: column;
  }

  .ec-layoutRole__left {
    order: 1;
  }
}

.ec-layoutRole__mainTop h2,
.ec-layoutRole__mainBottom h2,
.ec-layoutRole__footer h2 {
  position: relative;
  color: #fff;
  background-color: #002ca5;
  padding: 10px 6px;
  margin: 10px 0;
  overflow: hidden;
}

@media screen and (max-width: 580px) {
.ec-layoutRole__mainTop h2,
.ec-layoutRole__mainBottom h2,
.ec-layoutRole__footer h2 {
    color: #333;
    background-color: transparent;
    background-image: none;
    padding: 0;
  }
}

.navbar-toggle {
  margin: 0;
}

/***** common contents *****/

.ec-headerSearch {
  color: rgb(51, 51, 51);
}

.btn-warning {
  max-width: 100%;
}

.block_outer div.navi_h2,
.ec-categoryNaviRole div.navi_h2 {
  font-size: 18px;
  font-weight: 500;
  border-bottom: #4EB8E2 1px solid;
  color: #4EB8E2 !important;
  padding-bottom: 8px;
  margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
  .block_outer div.navi_h2,
  .ec-categoryNaviRole div.navi_h2 {
    background-color: transparent;
    background-image: none;
    padding: 0;
    position: relative;
    margin: 10px 0;
    overflow: hidden;
    font-size: 18px;
    border-bottom: #4EB8E2 1px solid;
    color: #4EB8E2 !important;
    font-weight: 500;
  }
}

div.ec-layoutRole__mainWithColumn h2 {
    position: relative;
    color: #fff;
    background-color: #002ca5;
    padding: 10px 6px;
    margin: 10px 0;
    overflow: hidden;
}

@media screen and (max-width: 580px) {
  div.ec-layoutRole__mainWithColumn h2 {
    color: #333;
    background-color: transparent;
    background-image: none;
    padding: 0;
  }
}

div.ec-layoutRole__mainWithColumn h3 {
  margin: 20px 0 10px;
  padding: 8px;
  background: #4EB8E2;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

div.ec-layoutRole__mainWithColumn h3 a {
  color: #fff;
}

.ranking img,
.ec-layoutRole__contents img {
  width: revert;
}

.ec-newsRole .ec-newsRole__news {
  font-size: 16px;
  border: none;
}

.ec-newsRole .ec-newsRole__newsDate {
  padding-top: 0;
}

small,
.small {
    font-size: 85%;
}

.ec-layoutRole__left {
  margin-bottom: 10px;
}

/***** page layout *****/

#set_image img {
  width: revert-layer;
}

.ec-topicpath .ec-topicpath__item a {
  color: inherit;
  text-decoration: none;
}

/***** 2026-08-24 合計欄の行が重なる問題の修正（AIKA） *****/
/*
  style.css では .ec-totalBox__spec の dd（金額）が position:absolute で
  右上に置かれている。絶対配置なので幅を確保せず、dt（項目名）が全幅に広がるため、
  項目名が長いと金額の下に潜り込んで文字が重なる。
  （例: クーポン名「新規会員登録1000円OFFクーポン」と「-¥1,000」が重なった）
  行を横並び（flex）にして、項目名と金額がそれぞれの幅を持つようにする。
  項目名が長い場合は折り返し、金額は折り返さず右端に残る。
*/
.ec-totalBox .ec-totalBox__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.ec-totalBox .ec-totalBox__spec dt {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.ec-totalBox .ec-totalBox__spec dd {
  position: static;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}