@charset "utf-8";

:root{
  --color-icoca-blue: #0F479E;
  --color-icoca-lightblue: #D5EFF5;
  --color-icoca-orange: #F4AB3E;
  --color-icoca-base: #EAF3F5;
  --color-icoca-aqua: #5CC2D9;
}

.icoca img{
  width: 100%;
}

body.routebus .icoca .page-ttl__ttl:before{
  background-color: transparent;
  content: "";
  width: 58px;
  height: 58px;
  font-size: inherit;
  border-radius: 0;
  background-image: url("../../img/routebus/icoca/icon_title_icoca.png");
  background-size: contain;
  vertical-align: middle;
  display: inline-block;
}

.icoca-section{
  margin: 0 auto min(10.416vw, 80px);
}

.icoca-section a{
  color: var(--color-icoca-blue);
}

.icoca__title{
  position: relative;
  background-color: var(--color-icoca-lightblue);
  color: var(--color-icoca-blue);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 2.2rem;
  width: 100%;
  border: none;
  margin: 0 0 min(4.557vw, 35px);
}

.icoca__title::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: var(--color-icoca-orange);
  left: 0;
  bottom: -5px;
  z-index: -1;
  display: inline-block;
}

.icoca-content{
  margin: 0 0 min(7.812vw, 60px);
}

.icoca-content__title{
  font-size: 2rem;
  border-bottom: 1px solid #C4C4C4;
  margin-bottom: min(3.906vw, 30px);
  font-weight: 500;
  padding-bottom: min(0.651vw, 5px);
}

.icoca-content__title:before{
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  background-image: url("../../img/routebus/icoca/icon_title.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -3px;
}

.icoca-content__item{
  display: grid;
  grid-template-columns: 34% 66%;
  align-items: center;
  margin: 0 0 min(7.812vw, 60px);
}

.icoca-content__item img{
  width: 100%;
  margin: 0 auto;
}

.icoca-content__text{
  background-color: var(--color-icoca-base);
  border-radius: 5px;
  padding: 30px;
}

.icoca-content__definition{
  display: grid;
  grid-template-columns: max-content auto;
  gap: min(1.302vw,10px) 0;
}

.icoca-content__definition dt{
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: 1fr 1.6rem;
  grid-auto-flow: column;
  font-weight: 500;
}

.icoca-content__definition dt::after{
  content: "：";
}

.icoca-content__definition dd{
  grid-column: 2 / 3;
}

.icoca__caution-list li{
  text-indent: -1em;
  padding-left: 1em;
}

.icoca__caution-list li:not(:last-of-type){
  margin: 0 0 min(0.651vw, 5px);
}

.icoca__caution-list li::before{
  content: "※";
}

.icoca__table{
  width: 100%;
}

.icoca__table-head{
  color: #fff;
  text-align: center;
  background-color: #5676A7;
}

.icoca__table tr{
  border-bottom: 2px solid #fff;
}

.icoca__table-body{
  text-align: center;
}

.icoca__table-body tr:nth-of-type(odd){
  background-color: #EAF3F5;
}

.icoca__table-body tr:nth-of-type(even){
  background-color: #EBEBEB;
}

.icoca__table th{
  font-weight: 400;
}

.icoca__table th, .icoca__table td{
  padding: 8px;
  vertical-align: middle;
}

.icoca__table th, .icoca__table td:not(:last-of-type){
  border-right: 2px solid #fff;
}

.icoca-content__image img{
  margin: 0 auto;
}

.icoca-content__image[src*="mobileicoca.png"]{
  border: 1px solid #C4C4C4;
}

.icoca-cardtype{
  margin-top: min(3.906vw, 30px);
}

.icoca-cardtype img{
  max-width: 200px;
}

.icoca-icocatype-mobile .icoca-content__image{
  max-width: 128px;
}

.icoca-content__app{
  display: flex;
  width: 80%;
  margin: min(2.604vw, 20px) 0 0;
}

.icoca-content__app li:first-of-type{
  margin-right: 20px;
}

.icoca-content__app img{
  width: 100%;
}

.icoca-type-text{
  margin-bottom: min(0.651vw, 5px);
  font-weight: 500;
  font-size: 1.8rem;
}

.icoca__footnote dt{
  margin-bottom: min(0.781vw, 6px);
}

.icoca-charge__item{
  display: grid;
  grid-template-columns: 66% 34%;
  align-content: center;
}

.icoca-charge__flow{
  counter-reset: blocknumwrapper-counter;
  margin-bottom: min(3.906vw, 30px);
}

.icoca-charge__flow > li{
  counter-increment: blocknumwrapper-counter;
  display: flex;
  align-items: flex-start;
  gap: 0 10px;
}

.icoca-charge__flow > li:not(:last-of-type){
  margin: 0 0 min(2.604vw, 20px);
}

.icoca-charge__flow-num::before {
  line-height: 19px;
  height: 20px;
  width: 20px; 
  font-size: 1.4rem;
  background-color: var(--color-icoca-aqua);
  color: #fff;
  content: counter(blocknumwrapper-counter);
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  font-weight: 500;
  vertical-align: middle;
}

.icoca-charge__flow .icoca__caution-list{
  margin: min(0.651vw, 5px) 0 0 0;
  font-size: 1.5rem;
}

.icoca-charge__flow .icoca__caution-list li:not(:last-of-type){
  margin-bottom: 0;
}

.icoca-charge__image{
  margin: 0 auto;
  align-self: center;
}

.icoca-charge__image[src*="img_charge_01"]{
  max-width: 220px;
}

.icoca-charge__image[src*="img_charge_02"]{
  max-width: 122px;
}

.icoca-charge__image[src*="img_charge_03"]{
  max-width: 160px;
}

.icoca-content__catch{
  text-align: center;
  background-color: var(--color-icoca-aqua);
  color: #fff;
  padding: 18px 10px 16px;
  border-radius: 100vh;
  max-width: 756px;
  margin: 0 auto;
  font-weight: 500;
  font-size: 1.8rem;
}

.icoca-content__definition-remarks{
  text-align: right;
  font-size: 1.5rem;
  grid-column: 1 / 3;
  margin-top: min(1.302vw, 10px);
}

.icoca__dot-list li{
  text-indent: -1em;
  padding-left: 1em;
}

.icoca__dot-list li:not(:last-of-type){
  margin-bottom: min(0.651vw, 5px);
}

.icoca__dot-list li::before{
  content: "・";
}

.icoca-iconpass{
  display: flex;
  align-items: center;
  gap: 0 60px;
}

.icoca-iconpass img{
  max-width: 135px;
  margin-left: 40px;
}

.icoca-iconpass a{
  border: 1px solid var(--color-icoca-blue);
  border-radius: 5px;
  padding: 10px 20px;
  display: grid;
  grid-auto-flow: column;
  gap: 0 20px;
}

.icoca-iconpass a::after{
  content: "";
  font-family: "icomoon";
  font-weight: normal;
  content: "\e908";
}

.icoca-content__img-iccards{
  margin: 0 0 min(3.906vw, 30px);
}

.icoca-content__text--small{
  font-size: 85%;
}

.icoca-howto img{
  max-width: 210px;
}

.icoca-content__img-map{
  max-width: 730px;
}

.icoca-content__img-map-text{
  margin-bottom: min(1.302vw, 10px);
}

.icoca-content__title-sub{
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: min(2.604vw, 20px);
}

.icoca-content__title-sub::before{
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--color-icoca-aqua);
  border-radius: 50%;
  display: inline-block;
  margin-right: 14px;
}

.icoca-pass img{
  max-width: 220px;
}

.icoca-content__text-caution{
  margin-top: min(2.604vw, 20px);
  font-size: 1.5rem;
}

.icocoa-entry a{
  text-decoration: underline;
}

.icoca-discount .icoca__table-head th:first-of-type{
  width: 40%;
}

.icoca-discount .icoca__table-body td{
  text-align: left;
}

.icoca__text--red{
  color: #FF0000;
}

.icoca-discount-price .icoca__table-head th{
  width: 20%;
}

.icoca-discount-price .icoca__dot-list{
  margin-bottom: min(3.906vw, 30px);
}

.icoca__table-discount{
  width: 50%;
}

.icoca-westerpoint a{
  text-decoration: underline;
}

.--show-sp{
  display: none;
}

@media screen and (max-width: 768px) {
body.routebus .icoca .page-ttl__ttl:before{
  width: 44px;
  height: 44px;
  left: 10px;
}

body.routebus .icoca .page-ttl__ttl{
  padding: 0 0 0 62px;
}

.contents__outer{
  padding: 0 10px;
}

.icoca__title{
  padding: 10px 14px;
  font-size: 1.8rem;
}

.icoca-content__title{
  font-size: 1.6rem;
}

.icoca-content__title:before{
  width: 18px;
  height: 18px;
  margin-right: 7px;
  margin-top: -3px;
}

.icoca-content__title-sub{
  font-size: 1.5rem;
}

.icoca-content__title-sub::before{
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.icoca-content__item{
  grid-template-columns: none;
  grid-auto-flow: row;
}

.icoca-content__item img{
  margin: 0 auto min(2.604vw, 20px);
}

.icoca-content__text{
  padding: 20px;
  grid-row: 2 / 3;
}

.icoca-content__definition dt{
  grid-column: auto;
  grid-template-columns: 1fr 1.4rem;
}

.icoca-content__definition dd{
  grid-column: auto;
}

.icoca-type-text{
  font-size: 1.6rem;
}

.icoca-content__app{
  width: 100%;
  flex-direction: column;
}

.icoca-content__app li:first-of-type{
  margin-right: 0;
  margin-bottom: min(1.302vw, 10px);
}

.icoca-content__app img{
  width: 70%;
}

.icoca-howto img{
  max-width: 180px;
}

.icoca-charge__image[src*="img_charge_01"]{
  max-width: 160px;
}

.icoca-charge__item{
  grid-template-columns: auto;
  grid-auto-flow: row;
  gap: min(2.604vw, 20px) 0;
}

.icoca-charge__image{
  grid-row: 1 / 2;
}

.icoca-charge__text{
  grid-row: 2 / 3;
}

.icoca-charge__flow .icoca__caution-list{
  font-size: 1.4rem;
}

.icoca-content__catch{
  font-size: 1.6rem;
}

.--show-sp{
  display: block;
}

.icoca-content__text-caution{
  font-size: 1.4rem;
}

.icoca-content__definition-remarks{
  font-size: 1.4rem;
}

.icoca__table-discount{
  width: 100%;
}

.icoca-iconpass{
  gap: 0 30px;
  justify-content: center;
}

.icoca-iconpass img{
  max-width: 100px;
  margin-left: 0;
}

.icoca-iconpass a{
  gap: 0 15px;
}
}