@charset "UTF-8";
/* base
----------------------------------------------------*/
ul,h2,h3,h4,h5,p,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 100 !important;

}
h2{
  line-height: 0;
}
#settlementArea {
  text-align: center;
  vertical-align: top;
  font-family: "Noto Sans Japanese";
}
#settlementArea img{
  width: 100%;
  vertical-align: bottom;
}
#settlementArea a{
  color: #0084d8!important;
  text-decoration: underline;
}
#settlementArea h2{
  margin: 0;
  padding: 0;
}
.page_body{
  padding: 3%;
}

/* module
----------------------------------------------------*/
.sec_ttl01{
  color: #0060b0;
  padding-bottom: 2%;
  border-bottom: 1px solid #999999;
  margin-bottom: 5%;
}
.sec_sub_ttl01{
  color: #0060b0;
  font-size: 100%;
  margin-bottom: 6%;
}
.sec_txt01{
  color: #000000;
  font-size: 80%;
  margin-bottom: 5%;
}
.top_back{
  width: 20%;
  float: right;
}
.page_arrow01{
  background: url(../img/page_arrow01.png) no-repeat bottom center;
  background-size: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%;
}
.page_frame_body{
  border: 1px solid #999999;
  border-radius: 15px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -moz-border-radius: 15px;
  padding: 3%;
}
.frame01_body {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 8%;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
}
.frame02_body {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 2%;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
}
.pos_txt01{
  position: absolute;
  top: -15%;
  left: 25%;
  width: 50%;
}
.pos_arrow01{
  background: url(../img/settlement_arrow01.png) no-repeat bottom center;
  padding-bottom: 9%;
}
.pos_pdf_icon01{
  background: url(../img/settlement_pdf_icon01.png) no-repeat top left;
  background-size: 10%;
  padding-left: 13%;
  padding-bottom: 5%;
}
.table_block01 table {
    width: 80%;
    margin: 0 auto 5%;
    border-collapse: collapse;
    border: none;
    color: #333333;
}
.table_block02 table {
    width: 100%;
    margin: 0 auto 2%;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    color: #333333;
}
.table_block02 table th {
    background-color: #f7f7f7;
    padding: 2%;
    border-right: 1px solid #cccccc;
}

.table_block02 table td {
    padding: 2%;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    text-align: center;
}
.note_txt{
  text-align: left;
  color: #402910;
  font-size: 80%;
}
.note_txt li{
  padding-left: 1em;
  text-indent: -1em;
}
.list_horizontal {
  color: #cc6000;
  text-align: left;
}
.list_horizontal li {
  /*display: inline-block;*/
  margin-right: 1em;
}

/*============================
helper
============================*/
/*margin*/
#settlementArea .h-m0a {margin: 0 auto;}
#settlementArea .h-mt5 {margin-top: 5%;}
#settlementArea .h-mb1 {margin-bottom: 1%;}
#settlementArea .h-mb2 {margin-bottom: 2%;}
#settlementArea .h-mb3 {margin-bottom: 3%;}
#settlementArea .h-mb4 {margin-bottom: 4%;}
#settlementArea .h-mb5 {margin-bottom: 5%;}
#settlementArea .h-mb6 {margin-bottom: 6%;}
#settlementArea .h-mb7 {margin-bottom: 7%;}
#settlementArea .h-mb8 {margin-bottom: 8%;}
#settlementArea .h-mb9 {margin-bottom: 9%;}
#settlementArea .h-mb10 {margin-bottom: 10%;}
#settlementArea .h-mr3 {margin-right: 3%;}
#settlementArea .h-mr4 {margin-right: 4%;}
#settlementArea .h-mr5 {margin-right: 5%;}
#settlementArea .h-ml15 {margin-left: 15%;}
/* padding */
#settlementArea .h-pb0 {padding-bottom: 0;}
#settlementArea .h-pt5 {padding-top: 5%;}
#settlementArea .h-pb3 {padding-bottom: 3%;}
#settlementArea .h-pb5 {padding-bottom: 5%;}
#settlementArea .h-pb8 {padding-bottom: 8%;}
/*float*/
#settlementArea .h-fl {float: left;}
#settlementArea .h-fr {float: right;}
#settlementArea .h-inbl {display: inline-block; *display: inline; zoom: 1; vertical-align: top; text-align: center;}
/*fontsize*/
#settlementArea .h-font110 {font-size: 110%;}
#settlementArea .h-font120 {font-size: 120%;}
#settlementArea .h-font130 {font-size: 130%;}
#settlementArea .h-font140 {font-size: 140%;}
/* clearfix */
#settlementArea .clearfix {
  zoom: 1;
}
#settlementArea .clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* width */
#settlementArea .h-wd10{width: 10%;}
#settlementArea .h-wd20{width: 20%;}
#settlementArea .h-wd22{width: 22%;}
#settlementArea .h-wd25{width: 25%;}
#settlementArea .h-wd30{width: 30%;}
#settlementArea .h-wd35{width: 35%;}
#settlementArea .h-wd40{width: 40%;}
#settlementArea .h-wd45{width: 45%;}
#settlementArea .h-wd48{width: 48%;}
#settlementArea .h-wd50{width: 50%;}
#settlementArea .h-wd55{width: 55%;}
#settlementArea .h-wd60{width: 60%;}
#settlementArea .h-wd64{width: 64%;}
#settlementArea .h-wd70{width: 70%;}
#settlementArea .h-wd80{width: 80%;}
#settlementArea .h-wd90{width: 90%;}
#settlementArea .h-wd100{width: 100%;}
/*text-align*/
#settlementArea .h-tc {text-align: center!important;}
#settlementArea .h-tl {text-align: left!important;}
#settlementArea .h-tr {text-align: right!important;}
/* position */
#settlementArea .h-rel{position: relative;}
/* color */
#settlementArea .h-color01{color: #0060b0;}
#settlementArea .h-color02{color: #aa8a59;}
#settlementArea .h-color03{color: #cc6000;}
#settlementArea .h-color04{color: #ff0000;}
/* font */
#settlementArea .h-font80{font-size: 80%;}
#settlementArea .h-font70{font-size: 70%;}
/* border */
.h-boader-b01{
  border-bottom: 1px dotted #1a70b8;
}

/* お支払い方法順次変更メッセージ */
p.txt-chg-pay {
  padding: 0 8%;
}

/* 「電子マネー」ブロック */
section#sec01 ul.after-border {
  position: relative;
  overflow: hidden;
  padding-bottom: 4%;
}
section#sec01 ul.after-border:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 0;
  border-bottom: 1px dotted #000;
  bottom: 0;
  left: 25%;
}

/* 「バーコード決済」ブロック */
section#sec07 h3 img {
  vertical-align: middle;
}

/*20180910_Add*/
#settlementArea .dashedBlock01 {
	width: 80%;
	padding:3%;
	border: 1px dashed #333;
}

/*20200701_Add*/
#settlementArea {
  overflow-wrap:break-word;
}

/*20230522_Add*/
#settlementArea .tic-borderblock01 {
  width: 90%;
  margin: 0 auto 7%;
  border: solid 1px #333;
  border-radius: 15px;
  padding:5% 3% 2%;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  position: relative;
}
#settlementArea .tic-borderblock01 ul {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content:         space-between;
flex-wrap: wrap;
justify-content:center;
align-items: center;
}
#settlementArea .tic-borderblock01 li {
flex: 1;
padding: 2%;
}
#settlementArea .tic-borderblock01 .tic-ttl01 {
  background:no-repeat #fff url(../img/money_block_ttlico01.png) 2vw 0vw;
  background-size: 12vw;
  color: #333;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size:5vw;
  padding: 2.5vw 3vw 0vw 14vw;
  position: absolute;
  width:44vw;
  top: -6vw;
}