@charset "utf-8";

:root{
  --cts-color-main: #004da1;
  --cts-gap: 80px;
}
@media (max-width: 767px) {
  :root {
    --cts-gap: 40px;
  }
}
#record-expense-pc {
  position:relative;
  margin:0;
  padding:0;
  overflow: hidden;
  text-align:center;
}

/*キービジュアル
-----------------------------------*/
#record-expense-pc .kv-image{
  margin:auto;
  width:100%;
  background: linear-gradient(to bottom, #ffd301, #ea5500);
}
#record-expense-pc .kv-image img{
  width:100%;
  max-width:1200px;
}

/*基本
-----------------------------------*/
#record-expense-pc .contents-inner{
  margin:var(--cts-gap) auto;
  width:90%;
  max-width:1200px;
  text-align:left;
}
#record-expense-pc .contents-inner h2{
  font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight:bold;
  color:var(--cts-color-main);
  border-bottom:1px solid var(--cts-color-main);
  padding-bottom:5px;
  margin-bottom:10px;
}
#record-expense-pc .contents-inner p,
#record-expense-pc .contents-inner .txt-list li{
  margin-bottom:10px;
  font-size:clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  line-height:1.7;
}

#record-expense-pc .contents-inner em{
  margin-right:0.5em;
  color: var(--cts-color-main);
  font-weight:bold;
  font-style: normal;
}

/*表
-----------------------------------*/
#record-expense-pc .contents-inner table{
  border:1px solid #ccc;
  width:100%;
}
#record-expense-pc .contents-inner th{
  padding:20px 10px;
  border:1px solid #ccc;
  background:#eee;
  text-align:center;
}
#record-expense-pc .contents-inner th.title{
  background:#ddd;
}
#record-expense-pc .contents-inner td{
  padding:20px 10px;
  border:1px solid #ccc;
  text-align:center;
}

/*おすすめPC
-----------------------------------*/
#record-expense-pc .contents-inner dl{
  margin-bottom:var(--cts-gap);
  width:100%;
  background:#eee;
}
#record-expense-pc .contents-inner dt{
  border-left:2px solid var(--cts-color-main);
  padding-left:20px;
  padding-top:10px;
  font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  line-height:1.7;
  color:var(--cts-color-main);
}
#record-expense-pc .contents-inner dt p{
  margin-top:10px;
  font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  line-height:1.2;
}
#record-expense-pc .contents-inner dd{
  padding:20px;
}

/*おすすめPCカード
-----------------------------------*/
#record-expense-pc .contents-inner .record-expense-pc-list{
  display:flex;
  width:100%;
  justify-content:center;
  align-items: center;
  gap:var(--cts-gap);
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card{
  border:1px solid var(--cts-color-main);
  background:#fff;
  padding:20px;
  width:40%;
  text-align:center;
}
#record-expense-pc .contents-inner .record-expense-pc-list{
  display:flex;
  width:100%;
  justify-content:center;
  align-items: center;
  gap:var(--cts-gap);
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card{
  border:1px solid var(--cts-color-main);
  background:#fff;
  padding:20px;
  width:40%;
  text-align:center;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card img{
  margin:auto;
  width:60%;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card .c-button--primary-blue{
  width:100% !important;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card p{
  text-align:left;
  font-size:16px;
  line-height:1.4;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card .pname-wrapper{
  font-weight:bold;
  font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  line-height:1.2;
  text-align:left;
}

#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card ul{
  padding-top:5px;
  margin-top:5px;
  border-top:1px dashed #999; 
  text-align:left;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card li{
  padding-bottom:5px;
  margin-bottom:5px;
  border-bottom:1px dashed #999;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card .text-price{
  font-size:12px;
  color:#e43344;
}
#record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card .text-price .main_price{
  font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
  font-weight:bold;
}

@media (max-width: 767px) {
  #record-expense-pc .contents-inner .record-expense-pc-list{
    display:block;
  }
  #record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card{
    margin-top:20px;
    width:100%;
  }
  #record-expense-pc .contents-inner .record-expense-pc-list .record-expense-pc-card:first-child{
    margin-top:0;
  }
}