@charset "utf-8";

*,
::before,
::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol{
  list-style: none;
}

a{
  color: inherit;
  text-decoration: none;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body{
  font-family: sans-serif;
  font-size: 16px;
  color: black;
  line-height: 1;
  background-color: white;
  margin:0 auto;
  line-height: 1.6;
}

img{
  max-width: 100%;
}

.header-inner{
  max-width: 1200px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media(max-width:750px){
  .header-inner{
    /* flex-flow: column; */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
  }
  
  .header-logo{
    width: 180px;
  }
  
  .site-menu {
    display: none;
  }
  
  .hamburger {
    display: flex;
  }
}

.header-logo{
  display: block;
  width:250px;
}

.site-menu ul{
  display: flex;
  font-size:1.7vw;
}
@media(max-width:750px){
  .site-menu ul{
    font-size:2.6vw;
  }
}


.site-menu ul li{
  margin-left: 20px;
  margin-right: 20px;
}


.footer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  
}

.footer-tel{
  font-size: 18px;
  font-weight: bold;
  margin-left: 30px;
}

/*700px以下の場合*/

@media screen and (max-width:700px){
  .header-inner{
    /* flex-direction: column; */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 70px;
  }
  .site-menu{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
  }
  .header-logo{
    margin-top: 20px;
  }

  /*footer*/

.footer{
  flex-direction: column;
}
.footer-tel{
  margin-top: 20px;
}

}

/*トップページ＿gridレイアウト*/

.container_toppage{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
  margin: 30px auto;
  width:90%;
}
@media(max-width:768px){
  .container_toppage{
    grid-template-columns: repeat(3,1fr);
  }
}
@media(max-width:576px){
  .container_toppage{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:480px){
  .container_toppage{
    grid-template-columns: 1fr;
  }
}

.name_toppage{
  text-align: center;
  margin-top: 5px;
  font-size: 0.9rem;
}

/*トップページ＿上部バナー*/

.banner_container{
  display: flex;
  flex-wrap: wrap;
  margin:10px auto 30px;
  gap:30px;
  justify-content: center;
}

/*トロフィーカタログページ*/
.top1{
  width:75%;
  margin:30px auto;
  line-height: 1.5em;
  font-size:0.9em;
}

.top2{
  width:75%;
  margin:30px auto;
  font-size:0.9em;
  font-style: italic;
  color: darkblue;
}



.tr1{
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  font-size:1.4em;
}
.tr2{
  font-size:0.8em;
  background-color: beige;
  width:95%;
  line-height: 1.4em;
}

.container_trophy{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  width:85%;
  margin:20px auto;
}
@media(max-width:756px){
  .container_trophy{
    grid-template-columns: repeat(1,1fr);
  }
}

.container_doll{
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap:10px;
  width:85%;
  margin:15px auto
}
@media(max-width:768px){
  .container_doll{
    grid-template-columns: repeat(5,1fr);
  }
}

.doll_name{
  text-align: center;
  font-size: 0.8em;
}
@media(max-width:768px){
  .doll_name{
    font-size:0.7em;
  }
}

.doll1{
  font-size:0.9em;
  margin:30px 0 10px 50px
}

.doll2{
  font-size: 0.8em;
  width:85%;
  margin:20px auto;
  line-height: 1.3em;
}

/*メダルのトップページ*/

.midashi_1{
  border-left: solid 8px blue;
  padding:8px;
  font-weight: bold;
  margin-left: 80px;
}
@media(max-width:768px){
  .midashi_1{
    margin-left: 60px;
  }
}
@media(max-width:480px){
  .midashi_1{
    margin-left: 30px;
  }
}

.container_medal{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
  margin:20px auto;
  width:85%;
}
@media(max-width:768px){
  .container_medal{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:576px){
  .container_medal{
    grid-template-columns: 1fr;
  }
}

.wrapper_medal{
  max-width: 300px;
  margin:0 auto;
  text-align: center;
}

.medal1{
  display: inline-block;
  font-size: 0.8em;
  text-align: left;
  margin-top:10px;
  line-height: 1.4em;
}
@media(max-width:768px){
  .medal1{
    font-size:0.8em;
  }
}

.medal_design_container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:10px;
  margin:20px auto;
  width:90%;
}
@media(max-width:768px){
  .medal_design_container{
    grid-template-columns: repeat(3,1fr);
  }
}
@media(max-width:576px){
  .medal_design_container{
    grid-template-columns: repeat(2,1fr);
  }
}

.medal_item{
  text-align: center;
}

.medal_name{
  text-align: center;
  font-size:1.7vw;
  margin: 10px;
}
@media(max-width:576px){
  .medal_name{
    font-size:2.8vw;
  }
}

.medal_top{
  width:85%;
  margin:20px auto;

}

.medal_mainph{
  margin-top: 15px;
}

.spec1{
  margin:20px auto 30px 40px;
  width:85%;
  line-height: 1.5em;
}
@media(max-width:768px){
  .spec1 {
    font-size:2.5vw;
    width:95%;
    margin:20px auto 30px 15px;
  }
}
.spec2{
  margin-left:40px;
  line-height: 1.5em;
}
@media(max-width:768px){
  .spec2 {
    font-size:2.4vw;
    margin:20px auto 10px 15px;
  }
}

.spec3{
  width:90%;
  margin:10px auto;
}


/*メダルノセコのコンテナ*/

.medal_design_container2{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap:10px;
  margin:20px auto;
  width:90%;
}
@media(max-width:768px){
  .medal_design_container2{
    grid-template-columns: repeat(5,1fr);
    font-size:0.8rem;
  }
}
@media(max-width:576px){
  .medal_design_container2{
    grid-template-columns: repeat(4,1fr);
  }
}

/*パンくずリスト*/
.breadcrumb-005 {
  display: flex;
  gap: 0 20px;
  list-style: none;
  padding: 0;
  font-size: 1.0em;
  margin:30px auto 20px 100px
}
@media(max-width:768px){
  .breadcrumb-005 {
    margin:20px auto 30px 20px;
    font-size:0.9em;
  }
}

.breadcrumb-005 li {
  display: flex;
  align-items: center;
}

.breadcrumb-005 li:first-child::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 4px;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  content: '';
}

.breadcrumb-005 li:not(:last-child)::after {
  display: inline-block;
  width: .3em;
  height: .6em;
  margin-left: 12px;
  background-color: #333333;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: '';
}

.breadcrumb-005 a {
  color: #333333;
  text-decoration: none;
}

.pay1{
  margin:50px auto 40px 70px;
  font-size:1.2em;
}

.pay2{
  margin:20px auto 10px 110px;
  padding:10px 20px;
  background-color: rgb(221, 245, 183);
  border-radius: 10px;;
  width:300px
}
@media(max-width:756px){
  .pay2{  margin:20px auto 10px 60px;
  }
}

.pay3{
  margin:15px auto 50px 110px;
  font-size:0.9em;
  line-height: 1.5em;
  width:75%;
}
@media(max-width:756px){
  .pay3{  margin:20px auto 10px 70px;
    line-height: 1.7em;
  }
}

.pay4{
  margin:30px auto 20px 110px;
  font-weight: bold;
}
@media(max-width:756px){
  .pay4{  margin:20px auto 10px 60px;
  }
}


/*会社情報*/

.company-main {
  width: 95%;
  max-width: 1100px;
  margin: 40px auto 0 auto;
}

/* 会社情報は幅広 */
.company-info {
  width: 100%;
  background: #f9f9f9;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 30px 25px;
  margin-bottom: 40px;
}

.company-info h2{
  margin-bottom: 30px;
}

/* アクセスは下に、幅50%で中央寄せ */
.company-access {
  width: 50%;
  min-width: 310px;
  max-width: 480px;
  background: #f9f9f9;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 28px 18px;
  margin: 0 auto 32px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* レスポンシブ（スマホ時は100%） */
@media (max-width: 800px) {
  .company-access {
    width: 98%;
    min-width: 0;
    max-width: 100%;
    padding: 20px 8px;
  }
  .company-main {
    width: 100%;
    padding: 0 2vw;
  }
}

.access-block {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
  justify-content: center;
}

.access-map-card,
.access-info-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 24px 18px;
  flex: 1 1 350px;
  min-width: 290px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.access-map-card {
  max-width: 480px;
}

.access-info-card h3 {
  font-size: 1.08em;
  margin-bottom: 10px;
  color: #1a57c5;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.access-info-section {
  margin-bottom: 18px;
}

.access-info-card ul {
  margin-left: 1.2em;
  padding-left: 0;
  margin-bottom: 0.5em;
}
.access-info-card ul li {
  margin-bottom: 2px;
  font-size: 0.98em;
}

/* Googleマップで見るリンク */
.access-info-card a {
  color: #3367d6;
  text-decoration: none;
  font-weight: bold;
}
.access-info-card a:hover {
  text-decoration: underline;
}

@media (max-width: 850px) {
  .access-block {
    flex-direction: column;
    gap: 20px;
  }
  .access-map-card, .access-info-card {
    max-width: 100%;
  }
}

.company-info table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

.company-info th,
.company-info td {
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 1em;
  vertical-align: top;
  word-break: break-word;
  background: none;
}

.company-info th {
  width: 120px;
  font-weight: bold;
  color: #2589d0;
  background: none;
}

.company-info tr:last-child td {
  /* 業務内容だけ幅広＆折り返し許容 */
  max-width: 400px;
}

@media (max-width: 600px) {
  .company-info th {
    width: 85px;
    font-size: 0.95em;
  }
  .company-info td {
    font-size: 0.95em;
  }
}

.company-info table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.company-info th, .company-info td {
  border-bottom: 1px solid #f0f0f0;
}
.company-info tr:last-child th,
.company-info tr:last-child td {
  border-bottom: none;
}

/*おわり*/


    /*優勝旗アコーディオン*/
    .accordion-001 {
      max-width: 80%;
      background-color: #f0f5f9;
      margin:20px auto 30px auto;
  }
  
  .accordion-001:not([open]) {
      margin-bottom: 7px;
  }
  
  .accordion-001 summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 1em 2em;
      border-radius: 5px;
      background-color: #2589d0;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
  }
  
  .accordion-001 summary::-webkit-details-marker {
      display: none;
  }
  
  .accordion-001 summary::after {
      transform: translateY(-25%) rotate(45deg);
      width: 7px;
      height: 7px;
      margin-left: 10px;
      border-bottom: 3px solid #fff;
      border-right: 3px solid #fff;
      content: '';
      transition: transform .3s;
  }
  
  .accordion-001[open] summary::after {
      transform: rotate(225deg);
  }
  
  .accordion-001 p {
      transform: translateY(-10px);
      opacity: 0;
      margin: 0;
      padding: 1em 2em 2em 2em;
      color: #333333;
      transition: transform .5s, opacity .5s;
  }
  
  .accordion-001[open] p {
      transform: none;
      opacity: 1;
  }

  .flag1{
    margin:50px auto 35px 80px;
    font-size: 1.5em;
    font-weight: bold;
  }
  @media(max-width768px){
    .flag1{
      margin:50px auto 35px 30px;
    }
  }

  .flag2{
    width:80%;
    margin:20px auto;
  }

  .flag3{
    width:70%;
    margin:30px auto;
  }

  .flag4{
    margin:50px auto 20px 90px;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 20px;
    background-color: rgb(251, 190, 111);
    width:300px;
    border-radius: 10px;
  }
@media(max-width:768px){
  .flag4{
    margin:50px auto 20px 40px;
  }
}


.flag5 {
  color: darkblue;
  font-weight: bold;
  margin: 20px auto 15px 100px;
}

@media(max-width:768px) {
  .flag5 {
    margin: 20px auto 15px 30px;

  }
}

  .flag6{
    margin:10px auto 20px 100px;
    line-height: 1.4em;
    font-size:0.9em;
  }
  @media(max-width:768px){
    .flag6{
      margin:10px auto 10px 50px;
      width:80%;
      line-height: 1.7em;;
    }
  }

  /*ペナント*/
  .pe1{
    margin:50px auto 20px 90px;
    font-weight: bold;
  }

  .pe2{
    margin:10px auto 20px 90px;
    line-height: 1.5em;
    font-size: 0.9em;
  }

  .pe3{
    width:80%;
    margin:20px auto;
  }

  .pe4{
    width:80%;
    margin:20px auto 20px 90px;
    line-height: 1.5em;
    font-size: 0.9em;
  }

  .container_pe{
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  @media(max-width:768px){
    .container_pe{
      grid-template-columns: repeat(1,1fr);
    }
  }

  .container_fireworks{
    display: grid;
    grid-template-columns: repeat(3,1fr) ;
    gap:15px;
    width:85%;
    margin:10px auto;
  }

@media(max-width:768px){
  .container_fireworks{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:576px){
  .container_fireworks{
    grid-template-columns: repeat(1,1fr);
  }
}

.container_fireworks1{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:15px;
  width:85%;
  margin:10px auto;
}
@media(max-width:768px){
  .container_fireworks1{
    grid-template-columns: repeat(1,1fr);
  }
}

.police_medal{
  width:75%;
  margin:50px auto 30px auto;
}

.kobetu_container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:15px;
  width:85%;
  margin:20px auto;
}


.kobetu_name{
  text-align: center;
  font-size: 0.9em;
}




/*カタログページの価格表テーブル*/
.container_catalogue{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:15px;
  width:90%;
  margin:0 auto;
}
@media(max-width:640px){
  .container_catalogue{
    grid-template-columns: 1fr;
  }
}

table {
  margin: 10px auto;
  width:80%;
}

.tbl-r02 .rank{
  width:15%;
}
@media(max-width:480px){
  .tbl-r02 .rank{
    width:auto;
  }
}
.tbl-r02 .price{
  width:35%;
}
@media(max-width:480px){
  .tbl-r02 .price{
    width:auto;
  }
}
.tbl-r02 .size{
  width:50%;
}
@media(max-width:480px){
  .tbl-r02 .size{
    width:auto;
  }
}

.tbl-r02 th {
  background: #b8b0b0;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}

.tbl-r02 td {
  border: solid 1px #ccc;
  padding: 10px;
}

td{
  text-align: right;
  font-size:1.7vw;
}
@media(max-width:640px){
  td{
    font-size:18px;
}
}
@media(max-width:480px){
  td{
    font-size:15px;
    text-align: center;
  }
}

.sozai{
  font-size: 1.0rem;
}

.rank{
  text-align: center;
}

/*即日出荷サービス*/
.container_1day{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width:85%;
  margin:0 auto;
}
@media(max-width:768px){
  .container_1day{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(max-width:576px){
  .container_1day{
    grid-template-columns: 1fr;
  }
}
.spec_1day{
  font-size: 0.8rem;
  line-height: 1.3rem;
}

.plaque_1day{
  width:85%;
  margin-left: 30px;
}
@media(max-width:576px){
  .plaque_1day{
    width:95%;
    margin-left: 5px;
  }
}

.wrapper_1day{
  max-width: 500px;
  margin:0 auto;
  text-align: center;
}

.spec1_1day{
  display: inline-block;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.3rem;

}

/*あんしんオーダー部分の品名*/

.or1{
  font-size: 1.1em;
  font-weight: bold;
  margin:10px 0;
}

/* ===============================================
   ハンバーガーメニュー用CSS（既存のstyle.cssに追加）
   =============================================== */

/* ハンバーガーメニューボタン */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  background: none;
  border: none;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* ハンバーガーメニューがアクティブな時のアニメーション */
.hamburger.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.mobile-menu-overlay.active {
  display: block;
}

/* モバイルメニュー */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  padding-top: 80px;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu ul li {
  border-bottom: 1px solid #eee;
}

.mobile-menu ul li a {
  display: block;
  padding: 20px 30px;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.mobile-menu ul li a:hover {
  background-color: #f5f5f5;
}

/* 既存のメディアクエリに追加する内容 */
@media(max-width:750px){
  .header-inner{
    height: 80px; /* 既存の高さ調整がある場合は調整 */
  }
  
  .header-logo{
    width: 200px; /* 必要に応じて調整 */
  }
  
  /* 既存のサイトメニューを非表示 */
  .site-menu {
    display: none;
  }
  
  /* ハンバーガーメニューを表示 */
  .hamburger {
    display: flex;
  }
}

/* 700px以下の既存メディアクエリに追加（既存の内容は残す） */
@media screen and (max-width:700px){
  /* 既存のコンテンツはそのまま保持し、以下を追加 */
  
  /* モバイルメニューの幅を調整（小さい画面用） */
  .mobile-menu {
    width: 280px;
    right: -280px;
  }
}



/*お支払について*/

/* メイン余白・背景 */
.payment-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0 auto;
  padding: 0 20px 40px 20px;
  background: #fff;
}

/* 各セクションの余白 */
.payment-section {
  margin-bottom: 40px;
}

/* セクション見出し */
.payment-title {
  font-size: 2em;
  margin-bottom: 12px;
  color: black;
  font-weight: bold;
}

.payment-heading {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #333;
  border-left: 5px solid #a5d6a7;
  padding-left: 14px;
}

/* リード文 */
.payment-lead {
  font-size: 1.15em;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #555;
}

/* カード風デザイン */
.payment-card-list {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.payment-card {
  background: #f7fafd;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(50,50,100,0.05);
  padding: 18px 20px 16px 18px;
  margin-bottom: 14px;
  min-width: 240px;
  max-width: 340px;
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1em;
  line-height: 1.6;
  word-break: break-word;
}


/* アイコン例：FontAwesome利用を想定 */
.payment-card .icon-cash::before   { content: "💴"; font-size: 1.3em; margin-right: 6px; }
.payment-card .icon-cod::before    { content: "📦"; font-size: 1.3em; margin-right: 6px; }
.payment-card .icon-bank::before   { content: "🏦"; font-size: 1.3em; margin-right: 6px; }
.payment-card .icon-truck::before  { content: "🚚"; font-size: 1.3em; margin-right: 6px; }
.payment-card .icon-mail::before   { content: "✉️"; font-size: 1.3em; margin-right: 6px; }

/* スマホ対応 */
/* 3. スマホ対応: カードを1列・幅100%に */
@media (max-width: 700px) {
  .payment-main {
    padding: 0 4vw 20px 4vw;
  }
  .payment-card-list {
    flex-direction: column;
    gap: 12px;
  }
  .payment-card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 16px 10px 14px 14px;
  }
}
/* 4. カード内アイコンとテキストの整列修正 */
.payment-card span[class^="icon-"] {
  margin-bottom: 4px;
  display: inline-block;
  font-size: 1.4em;
}

/* 5. カードタイトルとテキストの余白 */
.payment-card strong {
  margin-bottom: 4px;
  font-size: 1.06em;
  color: #1549ad;
}

/*おわり*/