@charset "UTF-8";

/* ヘッダー +++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー 背景色 右*/
.g-header{
  /* background-color:#7bc5ba; */
  background-color:#a3001d;
}
/* ヘッダー 背景色 左*/
.g-header:not(.noswoosh):after{
  background-color:#a3001d;
}
/* ヘッダー 背景色 中*/
.g-header:not(.noswoosh):before{
  /* background-color:#06a292; */
  background-color:#a3001d;
}

/* 見出し ++++++++++++++++++++++++++++++++++++++++++ */
/* 見出し２ 縦線マーク */ 
.g-h2-line:after,
.g-h2:after{
  background-color:#cc0022;
}
/* 見出し３ */
.g-h3 {
  color:#006561;
  border:none;
}

/* ボタン ++++++++++++++++++++++++++++++++++++++++++ */
[class*=" g-btn"],
[class^=g-btn]{
  background-color:#a3001d;
  box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
  /* transition: ease all 0.3s; */
}
[class*=" g-btn"]:hover,
[class^=g-btn]:hover{
  background-color:#89011a;
  /* transition: ease all 0.3s; */
}
[class*=" g-btn"] i,
[class^=g-btn] i{
  color:#a3001d;
  background-color:#f9fafb;
}
[class*=" g-btn"].primary,
[class^=g-btn].primary{
  background-color:#f58e33
}
[class*=" g-btn"].primary i,
[class^=g-btn].primary i{
  color:#f58e33
}
[class*=" g-btn"].primary:hover,
[class^=g-btn].primary:hover{
  background-color:#fa762a
}
/* 戻るボタン */
[class*=" g-btn"].gray,[class^=g-btn].gray {
    background-color: rgba(255,255,255,.8);
    border:solid;
    border-color:#808080;
    color: #808080;
}
[class*=" g-btn"].gray i,[class^=g-btn].gray i {
    background-color: #808080;
    color: #fff;
}
[class*=" g-btn"].gray:hover,[class^=g-btn].gray:hover {
/*    background-color: #4b5563;*/
    background-color: #d3d3d3;
}

/* 下線 +++++++++++++++++++++++++++++++++++++++++++ */
.border-b {
  border-bottom: solid 3px #cc0022;
}

/* テーブル +++++++++++++++++++++++++++++++++++++++++ */
.g-table {
  border-top: solid 5px #006561;
  border-bottom: solid 5px #006561;
}
.g-table > tbody > tr {
  border-top: solid 1px #006561;
}
.g-table > tbody > tr > th {
  box-sizing: content-box;
  width: 10em;
  background-color: #e9f7f6;
  border: none;
  /* text-align: center; */
  vertical-align: middle;
}
.g-table > tbody > tr > td {
  padding-left: 1em;
  width: auto;
  border: none;
}

@media (max-width:768px) {
  .g-table > tbody > tr > * {
    display: block;
  }
}

.g-radio:checked {
  background-color: #696969;
  border-color: #696969;
}


/* カスタム要素 */

/* 画面1 契約者名 ++++++++++++++++++++++++++++++++ */
.custom-title-header {
  background-color:#006561;
  color: #fff;
}

.custom-title-1 {
  font-size: 1.75rem;
  font-weight: bold;
}

.custom-bg-color-1 {
  background-color: #f3efe6;
}

/* 支払い方法選択ボタン */
.custom-btn {
  margin: 1rem auto;
  padding: 1rem 1rem;
  display: block;
  width: 90%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 3px 5px rgb(0 0 0 / 30%), 0 -1px 0 #dddddd;
  /* border: 3px solid #0da292; */
  color: #000;
  font-size: 1.15rem;
  border-radius: 0.25rem;
  /* transition: ease all 0.3s; */
}
.custom-btn:hover {
  background-color: rgba(182, 182, 182, 0.4);
  border-color: rgba(182, 182, 182, 0.4);;
  /* transition: ease all 0.3s; */
}
@media (min-width:768px) {
  .custom-btn {
    width: 70%;
  }
}

/* 画面１　ロゴ */
.logo {
  text-align: center;
  margin: 10px 0 10px;
}

.logo img {
  width: 70%;
  max-width: 400px;
  margin: 0 auto;
}

hr {
  border-color: #cc0022;
}
/* 画面１　注意事項リスト */
.indent-list > li {
  padding-left: 1em;
  text-indent: -1em;
}
/* 画面２　支払い内容一覧 */
.preview-data {
  display: flex;
  flex-wrap: wrap;
}

.preview-data > * {
  height: auto;
}

.preview-data > :first-child {
  min-width: 20em;
  text-align: left;
}

.preview-data > :nth-child(2) {
  margin:auto; 
  margin-right: 0;
  margin-bottom: 0;
  padding-left: 1em;
  width: auto;
  text-align: left;
  word-break: break-all;
}
/* 注意書き */
.form-txt {
  margin-top: 10px;
  display: block;
  color: #666;
  font-size: 0.9em;
}
/* セイメイ入力フォーム */
.col4-nm>*:nth-child(odd) {
  margin-top: 0.5rem;
  margin-right: 2%;
  width: 2em;
  text-align: left;
}

.col4-nm>*:nth-child(even) {
  width: calc((100% - 4em - 4% - 3%) / 2);
}

.col4-nm>*:nth-child(2) {
  margin-right: 3%;
}
.w-fit-content {
  width: fit-content;
}