@charset "UTF-8";

body, html {
	font-size: 15px;
}

/* common
---------------------------------------------------------- */
#main {
 font-size: 18px;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 line-height: 1.8;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 font-feature-settings: "palt";
 letter-spacing: 0.03em;
}
section {
  width: 910px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}
.note {
 text-indent: -1em;
 padding-left: 1em;
 padding-bottom: 0;
 font-size: 1rem;
}
.sp_only {
	display: none;
}
sup {
 font-size: 0.8em;
 vertical-align: super;
 color: #ff0000 !important;
}
.bold {
 font-weight: bold !important;
}
.red-bold {
 color: #ff0000 !important;
 font-weight: bold !important;
}
.mgnEm02 {
 margin-bottom: 2em !important;
}
.mgnEm03 {
 margin-bottom: 3em !important;
}
.mgnEm04 {
 margin-bottom: 4em !important;
}
.centerTxt {
 text-align: center !important;
}

@media screen and (min-width:1px) and (max-width:767px) {
	section {
	  width: 90%;
	}
 ul.list_dot li::before {
  font-size: 11px;
  top: 0.8em;
 }
 .sp_centerTxt {
  text-align: center;
 }
.note {
 font-size: .8rem;
 }
 .sp_only {
  display: block;
 }
}


/* link btn
---------------------------------------------------------- */

a.line {
 text-decoration: underline;
}
a.arw {
 text-decoration: underline;
}
a.arw:after {
 font-family: 'FontAwesome';
 content: '\f105';
 font-weight: bold;
 padding-left: 0.3em;
}
a.arw.arw01 {
 color: #000;
 text-decoration: none;
 font-weight: bold;
}
a.arw.arw01:after {
  color: #EAC901;
}
a.link_arw {
  padding: .5em 3.6em .5em 3.4em;
  display: inline-block;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  border-radius: 20px;
  background-color: #1f2f93;
  line-height: 1.3;
  font-size: 0.9em;
}
a.link_arw:after {
 font-family: 'FontAwesome';
 content: '\f105';
 font-weight: bold;
 position: absolute;
 right: 0.5em;
 top: 50%;
 -webkit-transform: translateY(-50%); /* Safari用 */
 transform: translateY(-50%);
 color: #eac900;
}
a.link_arw.link_arw01 {
 padding: .9em 3.6em .9em 3.4em;
 color: #10228c;
 border-radius: 10px;
 background-color: #FFFFFF;
 line-height: 1.3;
 font-size: 25px;
}
a.link_arw.link_arw02 {
 padding: 1em 3.6em 1em 3.4em;
 border-radius: 30px;
 line-height: 1.3;
 font-size: 20px;
 -webkit-box-shadow: 0px 2px 1px #E5E5E5;
 box-shadow: 0px 2px 1px #E5E5E5;
}

@media screen and (min-width:1px) and (max-width:767px) {
 a.link_arw.link_arw01 {
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
 }
 a.link_arw.link_arw02 {
  padding: 1em 2.4em 1em 2.0em;
  border-radius: 10px;
  font-size: 1rem;
 }
}


/* ttl
---------------------------------------------------------- */

.ttl01{
  font-size: 30px;
  text-align: center;
  display: block;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}
.ttl01 span{
  background-color: #5f7c94;
  padding: .3em 1em;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 1rem;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -4em;
  margin: auto;
  width: 20em;
  text-align: center;
}
.ttl01 img{
  width: 180px;
  margin-right: 20px;
  vertical-align: middle;
}
.ttl01 img.cashless{
  width: 280px;
}

.ttl_02 {
  display: block;
  background-color: #e60012;
  color: #FFFFFF;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  padding: 1.5em 1em;
  font-weight: bold;
  letter-spacing: 0.15em;
  width: 630px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
  line-height: 1.5;
}
.ttl_02.right:before {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  border: 12px solid transparent;
  border-left: 25px solid #e60012;
  right: -35px;
}
.ttl_02 span a {
  color: #E9C900;
  text-decoration: underline;
}
.ttl_02.right:after {
  background-image: url(../img/cashless1910/pic_character02.png);
  content: "";
  position: absolute;
  display: block;
  top: 0px;
  right: -148px;
  width: 112px;
  height: 165px;
  background-size: contain;
  background-repeat: no-repeat;
}


@media screen and (min-width:1px) and (max-width:767px) {
  .ttl01{
  font-size: 17px;
  line-height: 1.2;
  text-align: left;
  display: inline-block;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-left: 90px;
  }
  .ttl01 span{
  font-size: .8em;
  }
  .ttl01 img{
  width: 80px;
  margin-right: 20px;
  position: absolute;
  left: 0px;
  }

  .sec2 .ttl01 {
    padding-left: 0;
    text-align: center;
    display: block;
  }
  .ttl01 img.cashless{
    width: 160px;
    margin: 0 auto 10px;
    position: relative;
    display: block;
  }

  .ttl_02.right {
    margin-left: 0;
    margin-right: 80px;
    font-size: 15px;
    line-height: 1.5;
    width: calc(100% - 100px);
    text-align: left;
  }
  .ttl_02.right:before {
    border: 10px solid transparent;
    border-left: 20px solid #e60012;
    top: 30%;
    right: -25px;
  }
  .ttl_02.right:after {
    width: 85px;
    top: 13px;
    right: -104px;
  }
}


/* contents bg
---------------------------------------------------------- */

.bg_color01{
 background-color: #f8fafc;
}


/* contents mv
---------------------------------------------------------- */

.mv {
  padding-top: 50px;
  background-image: url(../img/cashless_merchant/mv_bg.png);
  background-repeat: repeat-x;
  background-position: center bottom;
  height: 370px;
  text-align: center;
  background-size: auto 140px;
}
.mv h2 img {
  width: 720px;
}

@media screen and (min-width:1px) and (max-width:767px) {
 .mv{
  padding-top: 10vw;
  height: 44vw;
  background-size: auto 15vw;
 }
 .mv h2 img{
  width: 100%;
 }
}


/* contents sec
---------------------------------------------------------- */

.sec {
  padding-top: 80px;
  padding-bottom: 80px;
  background-image: url(../img/cashless_merchant/sec_bg.gif);
}
.sec2 {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (min-width:1px) and (max-width:767px) {
 .sec {
  padding-top: 40px;
  padding-bottom: 40px;
  overflow-x: hidden;
 }
 .sec2 {
  padding-top: 40px;
  padding-bottom: 40px;
 }

}


/* shop_list
---------------------------------------------------------- */

ul.shop_list01::after {
 display: block;
 clear: both;
 content: "";
}
ul.shop_list01 li{
	list-style: none;
  width: 284px;
  margin-right: 29px;
  margin-bottom: 25px;
  border-radius: 10px;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: contain;
  /* [disabled]padding-top: 200px; */
  box-shadow: 0px 6px 15px 0px rgba(0, 63, 152, 0.2);
  float: left;
}
ul.shop_list01 li:nth-child(3n){
  margin-right: 0;
}
ul.shop_list01 li a{
  display: block;
  text-decoration: none !important;
  padding-top: 200px;
	transition: 0.2s;
	word-break: break-all;
}
ul.shop_list01 li a:hover{
  background-color: #FFFFFF;
	opacity: 0.6;
}

ul.shop_list01 li h4{
  font-size: 20px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 5px;
	color: #000000;
}
ul.shop_list01 li h4 span{
  font-size: .5em;
}
ul.shop_list01 table{
  width: 100%;
  color: #FFFFFF;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  position: relative;
}
ul.shop_list01 table img{
  height: 50px;
  margin-bottom: -25px;
	vertical-align: bottom;
}
ul.shop_list01 table caption img{
  width: 22px;
  height: auto;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 30px;
}
ul.shop_list01 table th {
	line-height: 0;
}
ul.shop_list01 table th,
ul.shop_list01 table td{
  text-align: center;
	vertical-align: top;
}
ul.shop_list01 table td:nth-of-type(1){
  background-color: #0BA4F7;
  border-bottom-left-radius: 10px;
}
ul.shop_list01 table td:nth-of-type(2){
  background-color: #e60012;
  padding-left: 10px;
  font-size: 3.5em;
  border-bottom-right-radius: 10px;
}
ul.shop_list01 table tr.single td {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
ul.shop_list01 table td {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  font-weight: bold;
  padding-bottom: 0.1em;
  color: #eac900;
  line-height: 1;
  white-space: nowrap;
  width: 50%;
  padding: 40px 0 10px;
	box-sizing: border-box;
	height: 135px;
}
ul.shop_list01 table td aside{
  font-size: 0.3em;
  margin-bottom: 0.1em;
  color: #FFFFFF;
}
ul.shop_list01 table td span{
  font-size: 0.35em;
  color: #FFFFFF;
}
ul.shop_list01 table td span.font01{
    line-height: 1.2;
    margin-top: .5em;
    display: block;
}
ul.shop_list01 table td span.yellow{
  color: #eac900;
}

ul.shop_list02 {
	text-align: center;
}
ul.shop_list02 li{
	display: inline-block;
	width: 205px;
  margin-right: 29px;
  margin-bottom: 25px;
  border-radius: 10px;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0px 6px 15px 0px rgba(0, 63, 152, 0.2);
}
ul.shop_list02 li.last{
  margin-right: 0;
}
ul.shop_list02 li h4{
  font-size: 20px;
  text-align: center;
	padding-top: 25px;
  padding-bottom: 30px;
}
ul.shop_list02 li h4 img{
  width: 50%;
}
ul.shop_list02 li .shop_list_box {
  color: #FFFFFF;
  position: relative;
  font-size: 2.5em;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: #eac900;
  line-height: 1;
  background-color: #e60012;
  padding-left: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 30px 0 10px;
	box-sizing: border-box;
	text-align: center;
}
ul.shop_list02 li .shop_list_box img {
  height: 40px;
	position: absolute;
	top: -20px;
	left: 50%;
	margin-left: -22px;
}
ul.shop_list02 li .shop_list_box span{
  font-size: 0.35em;
  color: #FFFFFF;
}

@media screen and (min-width:1px) and (max-width:767px) {
  ul.shop_list01 li{
  width: 48%;
  margin-right: 4%;
  overflow-x: hidden;
  }
  ul.shop_list01 li a{
  padding-top: 30vw;
  }
  ul.shop_list01 li h4{
  font-size: 0.7em;
  display: block;
  height: 2.5em;
  line-height: 1.3;
  padding-top: 1.5em;
  vertical-align: middle;
  padding-bottom: 0px;
  }
  ul.shop_list01 li h4.line2{
  height: 3em;
  padding-top: 1em;
  }
  ul.shop_list01 li:nth-child(2n){
  margin-right: 0 !important;
  }
  ul.shop_list01 li:nth-child(3n){
  margin-right: 4%;
  }
  ul.shop_list01 table caption img{
  width: 15px;
  padding-top: 15px;
 }
  ul.shop_list01 table img{
  height: 30px;
  margin-bottom: -20px;
  }
  ul.shop_list01 table td:nth-of-type(2){
  font-size: 2em;
  }
  ul.shop_list01 table td {
  font-size: 1.5em;
	height: 104px;
  }
  ul.shop_list01 table td aside{
    font-size: 0.3em;
  }
  ul.shop_list01 table td span{
    font-size: 0.35em;
  }
  ul.shop_list01 table td span.font01{
    font-size: 0.45em;
  }

  ul.shop_list02 li {
    width: 48%;
    margin-right: 0;
    margin-bottom: 15px;
  }

}