/* --------------------------------
        全ページ共通のCSS
-------------------------------- */

/* コンテナの基本スタイル設定 */
.container_hermes {
    max-width: 1000px;  /* コンテナの最大幅を900pxに設定 */
    margin: 40px auto; /* 上下に40pxのマージンを設定し、左右は自動で中央寄せ */
    padding: 0 40px;   /* 左右に40pxのパディングを設定 */
}

/* 画面の最大幅が767px以下のデバイス用のメディアクエリ */
@media (max-width:767px) {
    .container_hermes {
        margin: 24px 8px; /* 画面が小さいときは上下に32px、左右に28pxのマージンを設定 */
        padding: 0;        /* パディングを0に設定して、画面の幅を最大限に利用 */
    }
}

.user__postSearch_hermes{
    margin:10px;
}

/* --------------------------------
        新幹線の検索結果CSS
-------------------------------- */

/* 結果表示用コンテナのスタイリング */
.result__box_hermes {
    /* max-width: 800px;
    padding: 24px 8px 0px 8px; */
}

/* 検索情報テキストのスタイリング */
.search-info__hermes {
    text-align: center; /* テキストを中央揃えに設定 */
    font-weight: bold; /* テキストを太字に設定 */
    font-size: 20px; /* フォントサイズを20pxに設定 */
    line-height: 2;
}

/* リサーチセクションのフレックスボックス設定 */
.research_hermes {
    display: flex; /* Flexboxを使用して要素を横に並べる */
    justify-content: space-between; /* 子要素間に均等なスペースを設ける */
}

/* リサーチボタン群のコンテナスタイリング */
.research__buttons_hermes {
    width: 250px; /* 幅を250pxに設定 */
    display: flex; /* Flexboxを使用して要素を横に並べる */
    justify-content: space-between; /* 子要素間に均等なスペースを設ける */
    margin: 24px 4px 0 4px; /* 上に24px、左右に4px、下に0pxのマージンを設定 */
}

/* 各リサーチボタンのスタイリング */
.research__button_hermes {
    display: block; /* ブロックレベル要素として表示 */
    padding: 5px 20px; /* 内側に上下5px、左右20pxのパディングを設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    color: white; /* 文字色を白に設定 */
    text-decoration: none; /* テキストの下線を無くす */
    cursor: pointer; /* カーソルをポインターに設定 */
    font-weight: bold; /* テキストを太字に設定 */
    border-radius: 5px;
}

/* リサーチボタンのホバー時のスタイリング */
.research__button_hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に変更 */
}

/* 結果表示エリアのマージン設定 */
.result_hermes {
    margin-top: 40px; /* 上部に40pxのマージンを設定 */
}

/* 結果行のフレックスボックス設定。要素を横に並べ、中央揃えにします。 */
.result__row_hermes {
    display: flex; /* Flexboxを使用して要素を横に並べる */
    align-items: center; /* 要素を垂直方向の中心に揃える */
    padding: 20px 0; /* 上下に20pxのパディングを設定 */
}

/* 結果情報部分のスタイル。ディスプレイタイプを'contents'に設定して、親要素のスタイルの一部として内容を表示します。 */
.result__info_hermes {
    display: contents; /* 要素のボックスを表示から除外し、子要素を親の直接の子として扱う */
}

/* 同じクラスを持つ隣接する結果行同士の間に上部に1pxの灰色線を描画します。 */
.result__row_hermes + .result__row_hermes {
    border-top: 1px solid rgb(112, 112, 112); /* 上部に1pxの灰色線を追加 */
}

/* 結果名のスタイリング。Flex項目として拡張し、テキストは太字で表示されます。 */
.result__name_hermes {
    flex: 1; /* 利用可能な余剰スペースを全て使用 */
    font-weight: bold; /* フォントを太字に設定 */
}

/* 時間表示のスタイリング。特定の幅を設定し、テキストを中央に揃え、太字で表示します。 */
.result__time_hermes {
    width: 160px; /* 幅を160pxに設定 */
    font-weight: bold; /* フォントを太字に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 座席タイプ表示用のフォントサイズとテキストの配置を設定します。 */
.seat-type__hermes {
    font-size: 12px; /* フォントサイズを12pxに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    margin-bottom: 5px;
}

/* 価格表示用のフォントサイズを設定します。 */
.cut_hermes {
    font-size: 12px; /* フォントサイズを12pxに設定 */
}

/* 丸いボタンのスタイリング。背景色、テキスト色、フォントの太さ、カーソル、角丸などを設定します。 */
.maru-hermes {
    width: 60px; /* 幅を40pxに設定 */
    height: 50px; /* 高さを30pxに設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* フォントを太字に設定 */
    margin: 0 20px; /* 左右に20pxのマージンを設定 */
    cursor: pointer; /* カーソルをポインターに設定 */
    border: none; /* 境界線をなしに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    border-radius: 16px; /* 角を16pxの半径で丸く設定 */
}

/* .maru-hermesのホバー状態に対するスタイル */
.maru-hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に変更 */
}

/* .sankaku-hermesは三角形を想定したボタンスタイル */
.sankaku-hermes {
    width: 60px; /* 幅を40pxに設定 */
    height: 50px; /* 高さを30pxに設定 */
    background-color: #6088C6; /* 背景色を濃い青色に設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    margin: 0 20px; /* 左右に20pxのマージンを設定 */
    cursor: pointer; /* カーソルをポインターに設定 */
    border: none; /* 境界線をなしに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* .batsu-hermesは「バツ」を想定したボタンスタイル */
.batsu-hermes {
    width: 60px; /* 幅を40pxに設定 */
    height: 50px; /* 高さを30pxに設定 */
    background-color: white; /* 背景色を白に設定 */
    color: black; /* テキスト色を黒に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    margin: 0 20px; /* 左右に20pxのマージンを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    display: inline-block;
    line-height: 45px;
}

/* .hyphen-hermesは「ハイフン」を想定したボタンスタイル */
.hyphen-hermes {
    width: 40px; /* 幅を40pxに設定 */
    height: 30px; /* 高さを30pxに設定 */
    background-color: white; /* 背景色を白に設定 */
    color: black; /* テキスト色を黒に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    margin: 0 20px; /* 左右に20pxのマージンを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* スクリーン幅が767px以下でのスタイル指定 */
@media (max-width:767px) {
    .search-info__hermes {
        text-align: center; /* テキストを中央揃えに設定 */
        font-weight: bold; /* テキストを太字に設定 */
        font-size: 16px; /* フォントサイズを20pxに設定 */
    }

    /* 結果表示エリアのマージン調整 */
    .result_hermes {
        margin-top: 16px; /* 上部のマージンを16pxに設定 */
    }

    /* 座席タイプテキストのフォントサイズ調整 */
    .seat-type__hermes {
        font-size: 10px; /* フォントサイズを10pxに縮小 */
    }

    /* 割引表示のフォントサイズ調整 */
    .cut_hermes {
        font-size: 10px; /* フォントサイズを10pxに縮小 */
    }

    /* 研究ボタンのパディングとフォントサイズ調整 */
    .research__button_hermes {
        padding: 4px 8px; /* パディングを上下4px、左右8pxに設定 */
        font-size: 14px; /* フォントサイズを14pxに設定 */
    }

    /* 結果行のテキスト配置とジャスティファイ設定 */
    .result__row_hermes {
        text-align: center; /* テキストを中央揃えに設定 */
        justify-content: space-between; /* 子要素間に均等なスペースを設ける */
    }

    /* 結果情報ブロックの表示タイプと幅調整 */
    .result__info_hermes {
        display: block; /* ブロックとして表示 */
        width: 40%; /* 幅を40%に設定 */
    }

    /* 結果名のフレックス設定とフォントサイズ調整 */
    .result__name_hermes {
        flex: 1; /* 利用可能な余剰スペースを全て使用 */
        font-size: 12px; /* フォントサイズを12pxに設定 */
        padding: 12px;
    }

    /* .maru-hermesクラスでボタンのサイズ、スタイル、および外観を定義 */
    .maru-hermes {
        width: 50px; /* 幅を32pxに設定 */
        height: 50px; /* 高さを30pxに設定 */
        font-weight: bold; /* テキストを太字に設定 */
        cursor: pointer; /* カーソルをポインターに設定 */
        border: none; /* 境界線をなしに設定 */
        text-align: center; /* テキストを中央揃えに設定 */
        border-radius: 8px; /* 角の丸みを8pxの半径で設定 */
    }

    /* .sankaku-hermesクラスでボタンのスタイルを設定 */
    .sankaku-hermes {
        width: 50px; /* 幅を32pxに設定 */
        height: 50px; /* 高さを30pxに設定 */
        font-weight: bold; /* テキストを太字に設定 */
        cursor: pointer; /* カーソルをポインターに設定 */
        border: none; /* 境界線をなしに設定 */
        text-align: center; /* テキストを中央揃えに設定 */
    }

    /* .batsu-hermesクラスでボタンのスタイルと配置を定義 */
    .batsu-hermes {
        width: 50px; /* 幅を32pxに設定 */
        height: 50px; /* 高さを30pxに設定 */
        font-weight: bold; /* テキストを太字に設定 */
        margin: 0 20px; /* 左右に20pxのマージンを設定 */
        text-align: center; /* テキストを中央揃えに設定 */
    }

    /* .hyphen-hermesクラスでボタンの外観を定義 */
    .hyphen-hermes {
        width: 32px; /* 幅を32pxに設定 */
        height: 30px; /* 高さを30pxに設定 */
        font-weight: bold; /* テキストを太字に設定 */
        text-align: center; /* テキストを中央揃えに設定 */
    }
}



/* --------------------------------
カートアイコンに注文数を表示するためのCSS
-------------------------------- */

/* カート内アイテム数を表示する要素のスタイリング。初期状態では非表示に設定。 */
.cart__count_hermes {
    position: absolute; /* 絶対位置指定で、親要素に対して位置を固定 */
    top: -5px;
    right: 30%;
    background-color: red; /* 背景色を赤に設定 */
    color: #fff; /* テキスト色を白に設定 */
    height: 22px; /* 高さを22pxに設定 */
    width: 22px; /* 幅を22pxに設定 */
    z-index: 20; /* z-indexを20に設定して他の要素より前面に表示 */
    border-radius: 50%; /* 境界線の半径を50%にして円形にする */
    display: flex; /* Flexboxを使用して子要素を配置 */
    justify-content: center; /* 子要素を水平方向の中心に配置 */
    align-items: center; /* 子要素を垂直方向の中心に配置 */
    opacity: 0; /* 透明度を0に設定して見えなくする */
}

/* スクリーン幅が767px以下の場合のカート内アイテム数表示のスタイリング */
@media (max-width: 767px) {
    .cart__count_hermes {
        /* top: -0px; 
        right: 0; 
        height: 25px; 
        width: 25px;  */
        position: absolute;
        top: 2px;
        right: 7%;
        transform: translate(50%, -50%);
        font-size: 12px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 50%;
        line-height: 1;
    }
}


/* --------------------------------
        カートの中身に関するCSS
-------------------------------- */

/* カート内のテーブルの境界線のスタイルを定義 */
.cart__table_hermes {
  border: 1px solid #bbb;
  /* 灰色の1pxのソリッドボーダーを設定 */
}

/* カートのヘッダー部分のスタイリング */
.cart__head_hermes {
  font-weight: bold;
  /* フォントを太字に設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  text-align: center;
  /* テキストを中央揃えに設定 */
  background-color: #ddd;
  /* 背景色を薄い灰色に設定 */
  border: 1px solid #bbb;
  /* 灰色の1pxのソリッドボーダーを設定 */
}

/* カートのボディ部分のスタイリング */
.cart__body_hermes {
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  border-top: 1px solid #bbb;
  /* 上部に灰色の1pxのソリッドボーダーを設定 */
  border-right: 1px solid #bbb;
  /* 右側に灰色の1pxのソリッドボーダーを設定 */
  border-bottom: 1px solid #bbb;
  /* 下部に灰色の1pxのソリッドボーダーを設定 */
  border-left: 1px solid #bbb;
  /* 左側に灰色の1pxのソリッドボーダーを設定 */
}

/* カート内の「削除」ボタンのスタイリング */
.cart__remove_hermes {
  width: 70px;
  /* 幅を70pxに設定 */
  text-align: center;
  /* テキストを中央揃えに設定 */
}

/* カート内のチケット名部分のスタイリング */
.cart__ticket_hermes {
  flex: 1;
  /* 利用可能なスペースを全て埋める */
  border-left: 1px solid #bbb;
  /* 左側に灰色の1pxのソリッドボーダーを設定 */
}

/* カート内の単価部分のスタイリング */
.cart__unitPrice_hermes {
  width: 150px;
  /* 幅を150pxに設定 */
  border-left: 1px solid #bbb;
  /* 左側に灰色の1pxのソリッドボーダーを設定 */
}

/* カート内の数量部分のスタイリング */
.cart__quantity_hermes {
  width: 110px;
  /* 幅を110pxに設定 */
  border-left: 1px solid #bbb;
  /* 左側に灰色の1pxのソリッドボーダーを設定 */
}

/* カート内の合計金額を表示する部分のスタイル */
.cart__total_hermes {
  width: 110px;
  /* 幅を110pxに設定 */
  border-left: 1px solid #bbb;
  /* 左側に灰色の1pxのソリッドボーダーを設定 */
}

/* カートヘッダー内のpタグのスタイル。テーブルの行のように振る舞わせる */
div.cart__head_hermes p {
  display: table-row;
  /* ディスプレイタイプをテーブル行に設定 */
  margin: 0;
  /* マージンを0に設定 */
}

/* カートヘッダー内の各要素の高さを親の100%に設定して、一貫した高さを保持 */
.cart__head_hermes .cart__remove_hermes,
.cart__head_hermes .cart__ticket_hermes,
.cart__head_hermes .cart__unitPrice_hermes,
.cart__head_hermes .cart__quantity_hermes,
.cart__head_hermes .cart__total_hermes {
  height: 100%;
  /* 親要素と同じ高さに設定 */
}

/* カートボディ内の「削除」ボタンのスタイル */
.cart__body_hermes .cart__remove_hermes {
  padding: 10px;
  /* 内側に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して中央に配置 */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: center;
  /* 子要素を水平方向の中心に配置 */
  cursor: pointer;
  /* カーソルをポインターに設定 */
  text-decoration: underline;
  /* テキストに下線を設定 */
  color: #40afe3;
  /* テキスト色を青色に設定 */
}

/* カート内のチケット名セクションのスタイリング */
.cart__body_hermes .cart__ticket_hermes {
  padding: 10px;
  /* 内側に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: start;
  /* 子要素を水平方向の開始点に揃える */
}

/* カート内の単価セクションのスタイリング */
.cart__body_hermes .cart__unitPrice_hermes {
  padding: 10px;
  /* 内側に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: end;
  /* 子要素を水平方向の終点に揃える */
}

/* カート内の数量セクションのスタイリング */
.cart__body_hermes .cart__quantity_hermes {
  padding: 10px;
  /* 内側に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: end;
  /* 子要素を水平方向の終点に揃える */
  text-align: right;
  /* テキストを右寄せに設定 */
}

/* カート内の合計金額セクションのスタイリング */
.cart__body_hermes .cart__total_hermes {
  padding: 10px;
  /* 内側に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: end;
  /* 子要素を水平方向の終点に揃える */
}

/* カート内の価格表示部分のスタイリング */
.cart__price_hermes {
  flex: 1;
  /* Flexアイテムとして、利用可能なスペースを全て埋める */
  background-color: #eeeeee;
  /* 背景色を薄い灰色に設定 */
  padding: 10px;
  /* 全方向に10pxのパディングを設定 */
  display: flex;
  /* Flexboxを使用して子要素を横に並べる */
  align-items: center;
  /* 子要素を垂直方向の中心に揃える */
  justify-content: end;
  /* 子要素を水平方向の終点に揃える */
  font-weight: bold;
  /* フォントを太字に設定 */
}

/* カートページのリンクボタンのスタイリング */
.cart__link_hermes {
  padding: 10px 20px;
  /* 内側に上下10px、左右20pxのパディングを設定 */
  background: #40afe3;
  /* 背景色を青色に設定 */
  color: white;
  /* テキスト色を白に設定 */
  font-weight: bold;
  /* フォントを太字に設定 */
  margin: 24px auto;
  /* 上下に24px、左右に自動のマージンを設定して中央揃え */
  display: block;
  /* ブロックレベル要素として表示 */
  cursor: pointer;
  /* カーソルをポインターに設定 */
  text-decoration: none;
  /* テキストの下線を削除 */
  text-align: center;
  /* テキストを中央揃えに設定 */
  max-width: 320px;
  /* 最大幅を320pxに設定 */
  border-radius: 5px;
}

/* リンクボタンのホバー状態のスタイル */
.cart__link_hermes:hover {
  background: #5ed6ff;
  /* ホバー時に背景色を明るい青色に変更 */
}

/* カートヘッダー内の順序付けリストアイテムのスタイル */
div.cart__head_hermes ol li {
  display: table-cell;
  /* ディスプレイタイプをテーブルセルに設定 */
  padding: 16px;
  /* 全方向に16pxのパディングを設定 */
  text-align: center;
  /* テキストを中央揃えに設定 */
  background: #F4F3F0;
  /* 背景色を淡い灰色に設定 */
  overflow-x: hidden;
  /* 水平方向のオーバーフローを隠す */
  font-weight: bold;
  /* フォントを太字に設定 */
}

/* スクリーン幅が767px以下でのカートアイテムのスタイリング */
@media (max-width:767px) {

  /* チケット名のフレックスアイテム設定 */
  .cart__ticket_hermes {
    flex-basis: 20%;
    /* ベースの幅を20%に設定 */
    flex-grow: 2;
    /* 余剰スペースがある場合、他のflexアイテムよりも2倍の割合で成長 */
  }

  /* 単価のスタイリング */
  .cart__body_hermes .cart__unitPrice_hermes {
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
    width: 14%;
    /* 幅を14%に設定 */
    font-size: 11px;
    /* フォントサイズを11pxに設定 */
  }

  /* 数量のスタイリング */
  .cart__quantity_hermes {
    width: 51px;
    /* 幅を51pxに設定 */
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
  }

  /* 合計金額のスタイリング */
  .cart__total_hermes {
    width: 47px;
    /* 幅を47pxに設定 */
  }

  /* カートのヘッドとボディのフレックスラップ設定 */
  .cart__head_hermes,
  .cart__body_hermes {
    flex-wrap: nowrap;
    /* フレックスアイテムが折り返さないように設定 */
  }

  /* 削除ボタンのスタイリング */
  .cart__head_hermes .cart__remove_hermes {
    width: 10%;
    /* 幅を10%に設定 */
    font-size: 12px;
    /* フォントサイズを12pxに設定 */
  }

  /* チケット名のスタイリング */
  .cart__head_hermes .cart__ticket_hermes {
    width: 14%;
    /* 幅を14%に設定 */
    font-size: 12px;
    /* フォントサイズを12pxに設定 */
  }

  /* カートヘッダーの単価部分のスタイル調整 */
  .cart__head_hermes .cart__unitPrice_hermes {
    width: 14%;
    /* 幅を14%に設定 */
    font-size: 12px;
    /* フォントサイズを12pxに設定 */
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
  }

  /* カートヘッダーの数量部分のフォントサイズ設定 */
  .cart__head_hermes .cart__quantity_hermes {
    font-size: 12px;
    /* フォントサイズを12pxに設定 */
  }

  /* カートヘッダーの合計金額部分のスタイル調整 */
  .cart__head_hermes .cart__total_hermes {
    font-size: 12px;
    /* フォントサイズを12pxに設定 */
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
  }

  /* カートボディの削除ボタンのスタイル調整 */
  .cart__body_hermes .cart__remove_hermes {
    font-size: 10px;
    /* フォントサイズを10pxに設定 */
    width: 10%;
    /* 幅を10%に設定 */
  }

  /* カートボディのチケット名部分のスタイル調整 */
  .cart__body_hermes .cart__ticket_hermes {
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
    font-size: 11px;
    /* フォントサイズを11pxに設定 */
  }

  /* カートボディの数量部分のスタイル調整 */
  .cart__body_hermes .cart__quantity_hermes {
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
    font-size: 10px;
    /* フォントサイズを10pxに設定 */
  }

  /* カートボディの合計金額部分のスタイル調整 */
  .cart__body_hermes .cart__total_hermes {
    padding: 2px;
    /* 全方向に2pxのパディングを設定 */
    font-size: 11px;
    /* フォントサイズを11pxに設定 */
  }

  /* カート内の価格表示部分のフォントサイズ調整 */
  .cart__price_hermes {
    font-size: 14px;
    /* フォントサイズを14pxに設定 */
  }
}


/* --------------------------------
購入手続きにおける会員登録選択のCSS
-------------------------------- */

/* カテゴリーリンクのスタイリング。背景色、フォント、配置を定義。 */
.category__link_hermes {
    display: block; /* ブロックレベル要素として表示 */
    background-color: #bbb; /* 背景色を灰色に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 10px 20px; /* 内側に上下10px、左右20pxのパディングを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    width: 320px; /* 幅を320pxに設定 */
    margin: 20px auto 0; /* 上に20px、下に0pxのマージンを設定し、左右は自動で中央揃え */
    text-decoration: none; /* テキストの下線を削除 */
    border-radius: 5px;
}

/* カテゴリーリンクのホバー状態での背景色変更 */
.category__link_hermes:hover {
    background-color: #999999; /* ホバー時の背景色をより暗い灰色に設定 */
}

/* サインインボタンのスタイリング。背景色、フォント、配置を定義。 */
.category__signin_hermes {
    background-color: #6088C6; /* 背景色を青色に設定 */
    display: block; /* ブロックレベル要素として表示 */
    font-weight: bold; /* テキストを太字に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 10px 20px; /* 内側に上下10px、左右20pxのパディングを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    width: 320px; /* 幅を320pxに設定 */
    margin: 20px auto 0; /* 上に20px、下に0pxのマージンを設定し、左右は自動で中央揃え */
    text-decoration: none; /* テキストの下線を削除 */
    border-radius: 5px;
}

/* サインインボタンのホバー状態での背景色変更 */
.category__signin_hermes:hover {
    background-color: #5ed6ff; /* ホバー時の背景色を明るい青色に設定 */
}

/* ログインボタンのスタイリング。背景色、フォント、配置を定義。 */
.category__login_hermes {
    display: block; /* ブロックレベル要素として表示 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 10px 20px; /* 内側に上下10px、左右20pxのパディングを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    width: 320px; /* 幅を320pxに設定 */
    margin: 20px auto 0; /* 上に20px、下に0pxのマージンを設定し、左右は自動で中央揃え */
    border: none; /* 境界線を削除 */
}

/* ログインボタンのホバー状態での背景色変更 */
.category__login_hermes:hover {
    background-color: #5ed6ff; /* ホバー時の背景色を明るい青色に設定 */
}

/* 問い合わせリンクのスタイリング */
.inquiry__link_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin: 40px 0; /* 上下に40pxのマージンを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 同じカテゴリブロック間の上マージン設定 */
.category__block_hermes+.category__block_hermes {
    margin-top: 40px; /* 直前のカテゴリブロックの後に40pxのマージンを設定 */
}

/* カテゴリアイテムのフレックスボックススタイリング */
.category__item_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    align-items: center; /* 子要素を垂直方向の中心に揃える */
    margin-top: 20px; /* 上に20pxのマージンを設定 */
    justify-content: center; /* 子要素を水平方向の中心に配置 */
}

/* カテゴリ内のラベル部分の幅設定 */
.category__label_hermes {
    width: 120px; /* 幅を120pxに設定 */
}

/* カテゴリ内の入力フィールドのフレックス設定 */
.category__input_hermes {
    flex: 1; /* 利用可能なスペースを全て埋める */
    max-width: 320px; /* 最大幅を320pxに設定 */
}

/* メディアクエリでスクリーン幅が767px以下のデバイスに適用するスタイル */
@media (max-width: 767px) {
    /* カテゴリーリンクの幅調整 */
    .category__link_hermes {
        width: 240px; /* 幅を240pxに設定 */
    }

    /* サインインボタンの幅調整 */
    .category__signin_hermes {
        width: 240px; /* 幅を240pxに設定 */
    }

    /* ログインボタンの幅調整 */
    .category__login_hermes {
        width: 240px; /* 幅を240pxに設定 */
    }

    /* カテゴリーラベルのスタイル調整 */
    .category__label_hermes {
        width: 100px; /* 幅を100pxに設定 */
        font-size: 12px; /* フォントサイズを12pxに設定 */
    }

    /* カテゴリー入力フィールドの最大幅調整 */
    .category__input_hermes {
        max-width: 280px; /* 最大幅を280pxに設定 */
    }
}



/* --------------------------------
購入手続きにおけるユーザー情報入力のCSS
マイページの登録情報を変更するCSSと兼用
-------------------------------- */

/* ユーザーブロックのスタイリング。Flexboxを使用してアイテムを整理し、適切に配置 */
.user__block_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    flex-wrap: wrap; /* 子要素がコンテナの幅を超える場合に折り返す */
    align-items: center; /* 子要素を垂直方向の中心に揃える */
}

/* 同一ページ内に複数のユーザーブロックがある場合の間隔設定 */
.user__block_hermes+.user__block_hermes {
    margin-top: 20px; /* 上に20pxのマージンを追加 */
}

/* ユーザーラベルのスタイリング */
.user__label_hermes {
    width: 150px; /* 幅を150pxに設定 */
    display: inline-block; /* インラインブロック要素として表示 */
}

/* 入力ブロックのスタイリング。複数の入力フィールドを適切に配置 */
.user__inputBlock_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    flex: 1; /* 利用可能な余剰スペースを全て埋める */
    align-items: center; /* 子要素を垂直方向の中心に揃える */
    flex-wrap: wrap; /* 子要素がコンテナの幅を超える場合に折り返す */
}

/* 一般的な入力フィールドのスタイリング */
.user__input_hermes {
    width: 100%; /* 幅を100%に設定し、コンテナ全体に広がる */
    padding: 5px 10px; /* 内側に上下5px、左右10pxのパディングを設定 */
}

/* 名前入力フィールドのスタイリング。ページに2つ並べる場合 */
.user__inputName_hermes {
    width: 48%; /* 幅を48%に設定し、行内で2つ並べられるようにする */
    display: block; /* ブロックレベル要素として表示 */
    padding: 5px 10px; /* 内側に上下5px、左右10pxのパディングを設定 */
}

/* 2つ目の名前入力フィールドの左マージン設定 */
.user__inputName_hermes+.user__inputName_hermes {
    margin-left: 0%; /* 左に4%のマージンを追加 */
}

/* 郵便番号入力フィールドのスタイリング */
.user__inputPost_hermes {
    margin: 0 10px; /* 左右に10pxのマージンを設定し、他の入力フィールドから隔てる */
    width: 30%; /* 幅を30%に設定 */
    padding: 5px 10px; /* 内側に上下5px、左右10pxのパディングを設定 */
}

/* ユーザー操作用のボタンスタイリング */
.user__button_hermes {
    display: block; /* ブロックレベルで表示 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディング */
    color: white; /* テキスト色を白に */
    font-weight: bold; /* テキストを太字に */
    background-color: #6088C6; /* 青色の背景 */
    border: none; /* 境界線なし */
    cursor: pointer; /* ポインターをカーソルに */
    margin: 40px auto; /* 上下24pxのマージンで中央配置 */
    border-radius: 5px;
}

/* ボタンが無効化された場合のスタイル */
.user__button_hermes:disabled {
    cursor: not-allowed; /* カーソルを「操作不可」に */
    background-color: #bbb; /* 背景色を灰色に */
    margin: 40px auto; /* 上下40pxのマージンで中央配置 */
}

/* 住所入力エリアのスタイリング */
.user__address_hermes {
    display: block; /* ブロックレベルで表示 */
    width: 100%; /* 幅を100%に設定 */
    flex: 1; /* 余剰スペースを全て埋める */
}

/* 住所ラベルのスタイリング */
.user__address_hermes .user__label_hermes {
    margin-top: 20px; /* 上に20pxのマージン */
    display: block; /* ブロックレベルで表示 */
    width: 100%; /* 幅を100%に設定 */
}

/* 住所入力フィールドのスタイリング */
.user__address_hermes .user__input_hermes {
    margin-top: 10px; /* 上に10pxのマージン */
    display: block; /* ブロックレベルで表示 */
}

/* エラーメッセージのスタイル */
.user__error_hermes {
    font-size: 12px; /* フォントサイズを12pxに設定 */
    color: red; /* テキスト色を赤に */
    margin-top: 10px; /* 上に10pxのマージン */
}

/* 必須フィールドマーカーのスタイル */
.require_hermes {
    position: relative; /* 相対位置設定 */
}

/* 必須フィールドマーカーのアフターサイドを設定 */
.require_hermes::after {
    content: '*'; /* 内容にアスタリスクを設定 */
    position: absolute; /* 絶対位置設定 */
    transform: translateX(10px); /* X軸方向に10px移動 */
    text-align: center; /* テキストを中央揃え */
    color: red; /* テキスト色を赤に */
}

/* ボタンブロックのスタイリング */
.user__buttonBlock_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    gap: 20px; /* 各要素間に20pxのギャップ */
    justify-content: center; /* 子要素を水平方向の中心に配置 */
    margin-top: 24px; /* 上に24pxのマージン */
}

/* スクリーン幅が767px以下のデバイスに適用するスタイル */
@media (max-width: 767px) {
    /* ユーザーラベルの幅とフォントサイズの調整 */
    .user__label_hermes {
        width: 100px; /* 幅を100pxに設定 */
        font-size: 11px; /* フォントサイズを11pxに設定 */
        margin-bottom: 4px; /* 下に4pxのマージンを追加 */
    }

    /* ユーザー入力ブロック内の段落のフォントサイズを調整 */
    .user__inputBlock_hermes p {
        font-size: 12px; /* フォントサイズを12pxに設定 */
    }

    /* 一般的なユーザー入力フィールドのフォントサイズを調整 */
    .user__input_hermes {
        font-size: 13px; /* フォントサイズを13pxに設定 */
    }

    /* 名前入力フィールドの幅を100%に設定 */
    .user__inputName_hermes {
        width: 100%; /* 幅を100%に設定 */
    }

    /* 2つ目の名前入力フィールドのマージン設定 */
    .user__inputName_hermes+.user__inputName_hermes {
        margin-top: 0%; /* 上に2%のマージンを追加 */
        margin-left: 0; /* 左のマージンを0に設定 */
    }

    /* 郵便番号入力フィールドのマージン、幅、パディングの調整 */
    .user__inputPost_hermes {
        margin: 4px 8px; /* 上下に4px、左右に8pxのマージンを設定 */
        width: 32%; /* 幅を32%に設定 */
        padding: 4px; /* 全方向に4pxのパディングを設定 */
    }

    /* 住所入力エリアのフレックス設定を解除 */
    .user__address_hermes {
        flex: none; /* Flexアイテムとしての挙動を無効化 */
    }

    /* 住所ラベルのフォントサイズを調整 */
    .user__address_hermes .user__label_hermes {
        font-size: 14px; /* フォントサイズを14pxに設定 */
    }

    /* 必須フィールドマーカーの位置調整 */
    .require_hermes::after {
        transform: translateX(2px); /* X軸方向に2px移動 */
    }

    /* ボタンブロックのディスプレイ設定をブロックに変更 */
    .user__buttonBlock_hermes {
        display: block; /* ブロックレベルで表示 */
    }

    /* ユーザーボタンの幅を280pxに設定 */
    .user__button_hermes {
        width: 280px; /* 幅を280pxに設定 */
    }
}



/* --------------------------------
    パスワードリセットと
    ログインに関するCSS　※兼用
-------------------------------- */

/* 問い合わせヘッダーセクションのスタイリング */
.inquiry__head_hermes {
    background-color: #ddd; /* 背景色を薄いグレーに設定 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    border-left: 4px solid #6088C6; /* 左側に4pxの青色のボーダーを設定 */
    margin: 30px 0; /* 上下に30pxのマージンを設定 */
}

/* 問い合わせアイテムのスタイリング */
.inquiry__item_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    margin-top: 24px; /* 上に24pxのマージンを設定 */
}

/* 問い合わせラベルのスタイリング */
.inquiry__label_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
    width: 150px; /* 幅を150pxに設定 */
}

/* 問い合わせ入力フィールドのスタイリング */
.inquiry__input_hermes {
    width: 100%; /* 幅を100%に設定 */
    flex: 1; /* Flexboxの1単位として設定 */
    margin-right: 20px; /* 右に20pxのマージンを設定 */
    padding: 5px 10px; /* 上下5px、左右10pxのパディングを設定 */
}

/* 表示ボタンとログインボタンのスタイリング */

.inquiry__login_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin: 30px auto 0; /* 上に30pxのマージン、左右自動で中央揃え、下に0 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    border: none; /* 境界線なし */
    cursor: pointer; /* カーソルをポインターに設定 */
}

/* 表示ボタンとログインボタンのホバー状態での背景色変更 */

.inquiry__login_hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に設定 */
}

/* 表示ボタンとログインボタンの無効状態での背景色変更 */

.inquiry__login_hermes:disabled {
    background-color: #bbb; /* 無効状態で背景色を灰色に設定 */
    cursor: not-allowed; /* カーソルを「操作不可」に設定 */
}

/* メディアクエリで画面幅が767px以下の場合のスタイル調整 */
@media (max-width: 767px) {
    /* 問い合わせラベルのスタイリング調整 */
    .inquiry__label_hermes {
        margin-left: 8px; /* 左に8pxのマージンを設定 */
        width: 120px; /* 幅を120pxに設定 */
    }

    /* 問い合わせ入力フィールドのスタイリング調整 */
    .inquiry__input_hermes {
        margin-right: 8px; /* 右に8pxのマージンを設定 */
        padding: 4px; /* 全方向に4pxのパディングを設定 */
    }

    /* 表示ボタンとログインボタンのマージン調整 */
    .inquiry__login_hermes {
        margin: 40px auto 0; /* 上に40pxのマージン、左右自動で中央揃え、下に0 */
    }

    /* 問い合わせブロックのマージン調整 */
    .inquiry__block_hermes {
        margin: 0 2vw; /* 左右に2vwのマージンを設定 */
    }
}




/* --------------------------------
    アカウント登録に関するCSS
-------------------------------- */

/* 登録完了メッセージのスタイリング */
.registered_message_hermes {
    display: block; /* ブロックレベル要素として表示 */
    font-size: 20px; /* フォントサイズを20pxに設定 */
    font-weight: bold; /* テキストを太字に設定 */
    margin: 40px auto; /* 上下に40px、左右自動で中央揃えのマージンを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 登録完了後のリンクボタンのスタイリング */
.registered_link_hermes {
    background-color: #6088C6; /* 背景色を青色に設定 */
    display: block; /* ブロックレベル要素として表示 */
    font-weight: bold; /* テキストを太字に設定 */
    color: white; /* テキスト色を白に設定 */
    padding: 10px 20px; /* 全方向に10px、左右に20pxのパディングを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    width: 320px; /* 幅を320pxに設定 */
    margin: 20px auto 0; /* 上に20px、下に0のマージンで中央揃え、左右自動 */
    text-decoration: none; /* テキストの下線を削除 */
}

/* リンクボタンのホバー状態での背景色変更 */
.registered_link_hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に変更 */
}

/* メディアクエリで画面幅が767px以下の場合のリンクボタンの幅調整 */
@media (max-width: 767px) {
    .registered_link_hermes {
        width: 280px; /* 幅を280pxに設定 */
    }
}



/* --------------------------------
        マイページに関するCSS
-------------------------------- */

/* マイページのユーザー名表示スタイル */
.mypage_name_hermes {
    font-size: 32px; /* フォントサイズを32pxに設定 */
    margin: 40px auto; /* 上下に40px、左右自動で中央揃えのマージンを設定 */
    font-weight: bold; /* テキストを太字に設定 */
    color: #353535; /* テキスト色をダークグレーに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* マイページ内のリンクスタイル */
.mypage_block_hermes a {
    font-size: 18px; /* フォントサイズを18pxに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    cursor: pointer; /* カーソルをポインターに設定 (リンク表現) */
    margin: 24px auto; /* 上下に24pxのマージンで中央揃え、左右自動 */
}

/* メディアクエリで画面幅が767px以下の場合のマイページのユーザー名表示スタイル調整 */
@media (max-width: 767px) {
    .mypage_name_hermes {
        font-size: 22px; /* フォントサイズを22pxに小さく設定 */
        padding: 16px; /* 内側に16pxのパディングを追加 */
        margin: 24px auto; /* 上下に24pxのマージンで中央揃え、左右自動 */
    }
}



/* --------------------------------
    マイページの注文履歴に関するCSS
-------------------------------- */

/* 注文見出しのスタイリング */
.myorder__head_hermes {
    font-size: 32px; /* フォントサイズを32pxに設定 */
    margin: 40px auto; /* 上下に40px、左右自動で中央揃えのマージンを設定 */
    font-weight: bold; /* テキストを太字に設定 */
    color: #353535; /* テキスト色をダークグレーに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 注文リンクのスタイリング */
.myorder__link_hermes {
    display: block; /* ブロックレベル要素として表示 */
    text-align: center; /* テキストを中央揃えに設定 */
    font-size: 18px; /* フォントサイズを18pxに設定 */
    padding: 16px;
    padding-top: 28px;
    margin-top: 16px;
}

/* 注文情報のスタイリング */
.myorder__info_hermes {
    display: block; /* ブロックレベル要素として表示 */
    text-align: center; /* テキストを中央揃えに設定 */
    font-size: 18px; /* フォントサイズを18pxに設定 */
    padding: 8px;
}

/* 戻るボタンのスタイリング */
.user__buttonBack_hermes {
    background-color: #bbb; /* 背景色をグレーに設定 */
    display: block; /* ブロックレベル要素として表示 */
    margin: 40px auto; /* 上下に40pxのマージンで中央揃え */
    width: 280px; /* 幅を280pxに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    border-radius: 5px;
}

/* 戻るボタンのホバー状態での背景色変更 */
.user__buttonBack_hermes:hover {
    background-color: #cccccc; /* ホバー時に背景色を明るいグレーに変更 */
}

/* メディアクエリで画面幅が767px以下の場合の注文見出しのスタイル調整 */
@media (max-width: 767px) {
    .myorder__head_hermes {
        font-size: 22px; /* フォントサイズを22pxに小さく設定 */
        padding: 16px; /* 内側に16pxのパディングを追加 */
        margin: 24px auto; /* 上下に24pxのマージンで中央揃え */
    }
}



/* --------------------------------
    支払い方法と座席選択のCSS
-------------------------------- */

/* セレクトヘッドセクションのスタイリング */
.select__head_hermes {
    background-color: #ddd; /* 背景色を薄いグレーに設定 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    border-left: 4px solid #6088C6; /* 左側に4pxの青色のボーダーを設定 */
    margin-bottom: 30px; /* 下に30pxのマージンを設定 */
}

/* セレクトブロックのマージン調整 */
.select__block_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
}

/* セレクトタイプのマージントップ設定 */
.select__sentType_hermes {
    margin-top: 40px; /* 上に40pxのマージンを設定 */
}

/* セレクトボディのマージン設定 */
.select__body_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
    margin-bottom: 50px; /* 下に50pxのマージンを設定 */
}

/* セレクトボタンのスタイリング */
.select__button_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin: 30px auto 0; /* 上に30px、下に0のマージンで中央揃え、左右自動 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    border: none; /* 境界線なし */
    cursor: pointer; /* カーソルをポインターに設定 */
    width: 100%;
}

/* セレクトボタンのホバー状態での背景色変更 */
.select__button_hermes:hover {
    background-color: #5ed6ff; /* ホバー時の背景色を明るい青色に設定 */
}

/* チケット名のマージントップ設定 */
.select__ticketName_hermes {
    margin-top: 20px; /* 上に20pxのマージンを設定 */
}

/* セレクト位置のドロップダウンメニューのマージン設定 */
.select__position_hermes select {
    margin-left: 30px; /* 左に30pxのマージンを設定 */
}

/* セレクトリンクのスタイリング */
.select__link_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin-left: 20px; /* 左に20pxのマージンを設定 */
    margin-top: 20px;
}

.select__br_hermes {
  display: none;
}

.select__space_hermes {
  display: inline-block;
}

.select__positionLabel_hermes {
  display: inline-block;
  margin: 16px 20px;
}

/* メディアクエリで画面幅が767px以下の場合のスタイル調整 */
@media (max-width: 767px) {
    .select__button_hermes {
        margin: 40px auto 0; /* 上に40px、下に0のマージンで中央揃え、左右自動 */
    }

    .select__br_hermes {
      display: block;
    }

    .select__space_hermes {
      display: none;
    }
}



/* --------------------------------
        注文内容確認のCSS
-------------------------------- */

/* 確認ヘッダーセクションのスタイリング */
.confirm__head_hermes {
    background-color: #ddd; /* 背景色を薄いグレーに設定 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    border-left: 4px solid #6088C6; /* 左側に4pxの青色のボーダーを設定 */
    margin: 30px 0; /* 上下に30pxのマージンを設定 */
}

/* 確認ボディセクションのマージン設定 */
.confirm__body_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
}

/* ユーザーヘッダーのマージン設定 */
.confirm__userHead_hermes {
    margin-top: 20px; /* 上に20pxのマージンを設定 */
    margin-left: 20px; /* 左に20pxのマージンを設定 */
}

/* ユーザーボディのマージン設定 */
.confirm__userBody_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
}

/* 戻るリンクのスタイリング */
.confirm__back_hermes {
    display: block; /* ブロックレベル要素として表示 */
    text-align: right; /* テキストを右揃えに設定 */
    margin-top: 20px; /* 上に20pxのマージンを設定 */
}

/* 確認ボタンのスタイリング */
.confirm__button_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin: 30px auto 0; /* 上に30pxのマージン、左右自動で中央揃え、下に0 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    border: none; /* 境界線なし */
    cursor: pointer; /* カーソルをポインターに設定 */
    width: 100%;
}

/* 確認ボタンのホバー状態での背景色変更 */
.confirm__button_hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に設定 */
}

/* 無効化された確認ボタンのスタイリング */
.confirm__button_hermes:disabled {
    background-color: #bbb; /* 背景色を灰色に設定 */
    cursor: not-allowed; /* カーソルを「操作不可」に設定 */
}

/* 支払いタイプのマージン設定 */
.confirm__paymentType_hermes {
    margin-left: 20px; /* 左に20pxのマージンを設定 */
}


.mydelete__button_hermes {
    display: block; /* ブロックレベル要素として表示 */
    margin: 30px auto 0; /* 上に30px、下に0のマージンで中央揃え、左右自動 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    color: white; /* テキスト色を白に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    background-color: red; /* 背景色を青色に設定 */
    border: none; /* 境界線なし */
    cursor: pointer; /* カーソルをポインターに設定 */
    width: 280px;
    border-radius: 5px;
}

.user__text_hermes {
    line-height: 1.4;
}

.user__caution_hermes {
    margin-bottom: 10px;
}

/* メディアクエリで画面幅が767px以下の場合のスタイル調整 */
@media (max-width: 767px) {
    /* 確認ボディセクションのマージン設定 */
    .confirm__body_hermes {
        margin-left: 8px; /* 左に8pxのマージンを設定 */
    }

    /* ユーザーヘッダーのマージン設定 */
    .confirm__userHead_hermes {
        margin-left: 8px; /* 左に8pxのマージンを設定 */
    }

    /* ユーザーボディのマージン設定 */
    .confirm__userBody_hermes {
        margin-left: 8px; /* 左に8pxのマージンを設定 */
    }

    /* 支払いタイプのマージン設定 */
    .confirm__paymentType_hermes {
        margin-left: 8px; /* 左に8pxのマージンを設定 */
    }

    /* 確認ボタンのマージン設定 */
    .confirm__button_hermes {
        margin: 40px auto 0; /* 上に40pxのマージン、左右自動で中央揃え、下に0 */
    }
}



/* --------------------------------
    予約確定後の注文詳細に関するCSS
-------------------------------- */

/* 注文表示セクションのスタイリング */
.show__order_hermes {
    display: flex; /* Flexboxを使用して子要素を横に並べる */
    flex-wrap: wrap; /* 子要素がコンテナの幅を超える場合に折り返す */
    border: 1px solid #ccc; /* 外枠を薄いグレーの実線で囲む */
    border-radius: 5px; /* 枠の角を5pxの半径で丸める */
    padding: 20px; /* 全方向に20pxのパディングを設定 */
    margin-bottom: 20px; /* 下に20pxのマージンを設定 */
    background-color: #f9f9f9; /* 背景色を薄いグレーに設定 */
}

/* 注文表示セクション内のボディとヘッドのスタイリング */
.show__body_hermes,
.show__head_hermes {
    width: 50%; /* 幅を50%に設定し、親要素の半分の幅にする */
    border: 1px solid #ccc; /* 外枠を薄いグレーの実線で囲む */
    padding: 10px 10px 10px 10px; /* 全方向に10pxのパディングを設定 */
    margin: 16px 0; /* 上下に16pxのマージンを設定 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
}

/* 注文表示セクション内のヘッドの追加スタイリング */
.show__head_hermes {
    font-weight: bold; /* テキストを太字に設定 */
}

/* チケット情報のスタイリング */
.ticket__trainName_hermes,
.ticket__date_hermes,
.ticket__station_hermes,
.ticket__position_hermes,
.ticket__count_hermes,
.ticket__price_hermes {
    margin: 0 auto; /* 上下に0、左右自動で中央揃えのマージンを設定 */
}

/* 郵便番号と住所情報のスタイリング */
.postcode__hermes,
.address_hermes {
    margin: 0 auto; /* 上下に0、左右自動で中央揃えのマージンを設定 */
}

/* 注意メッセージのスタイリング */
.show__caution_hermes {
    display: block; /* ブロックレベル要素として表示 */
    font-size: 18px; /* フォントサイズを18pxに設定 */
    color: red; /* テキスト色を赤に設定 */
    font-weight: bold; /* テキストを太字に設定 */
    width: 100%; /* 幅を100%に設定 */
    margin-top: 20px; /* 上に20pxのマージンを設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 支払い情報のスタイリング */
.show__payment_hermes {
    display: block; /* ブロックレベル要素として表示 */
    padding: 10px 20px; /* 上下10px、左右20pxのパディングを設定 */
    font-weight: bold; /* テキストを太字に設定 */
    color: #fff; /* テキスト色を白に設定 */
    background-color: #6088C6; /* 背景色を青色に設定 */
    margin: 20px auto; /* 上下に20pxのマージンで中央揃え、左右自動 */
    border-radius: 5px;
}

/* 支払い情報のホバー状態での背景色変更 */
.show__payment_hermes:hover {
    background-color: #5ed6ff; /* ホバー時に背景色を明るい青色に設定 */
}

/* メディアクエリで画面幅が767px以下の場合のスタイル調整 */
@media (max-width: 767px) {
    /* 注文ヘッダーのスタイリング */
    .show__head_hermes {
        width: 30%; /* 幅を30%に設定 */
        margin: 8px 0; /* 上下に8pxのマージンを設定 */
        font-size: 12px; /* フォントサイズを12pxに設定 */
    }

    /* 注文ボディのスタイリング */
    .show__body_hermes {
        width: 70%; /* 幅を70%に設定 */
        margin: 8px 0; /* 上下に8pxのマージンを設定 */
        font-size: 12px; /* フォントサイズを12pxに設定 */
    }

    .show__body_hermes * {
        font-size: 12px;
    }

    .show__body_hermes * {
      font-size: inherit;
    }


    /* 注意メッセージのフォントサイズ調整 */
    .show__caution_hermes {
        font-size: 14px; /* フォントサイズを14pxに設定 */
    }
}



/* --------------------------------
            決済確認のCSS
-------------------------------- */

/* 支払いアイテムのスタイリング */
.payment__item_hermes {
    font-size: 16px; /* フォントサイズを16pxに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}

/* 支払いヘッダーのスタイリング */
.payment__head_hermes {
    font-size: 20px; /* フォントサイズを20pxに設定 */
    font-weight: bold; /* テキストを太字に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    border-bottom: 1px solid #353535; /* 下にダークグレーの実線ボーダーを設定 */
    display: block; /* ブロックレベル要素として表示 */
}

/* 支払いボディのスタイリング */
.payment__body_hermes {
    font-size: 16px; /* フォントサイズを16pxに設定 */
    text-align: center; /* テキストを中央揃えに設定 */
    display: block; /* ブロックレベル要素として表示 */
    margin: 16px auto; /* 上下に16pxのマージン、左右自動で中央揃え */
    width: 200px;
    height: 40px;
}

/* 支払いボタンのスタイリング */
.payment__button_hermes {
    display: block; /* ブロックレベル要素として表示 */
    color: #353535; /* テキスト色をダークグレーに設定 */
    margin: 20px auto; /* 上下に20pxのマージン、左右自動で中央揃え */
    width: 100%;
    height: 40px;
}

/* 支払いアイテム間のマージン設定 */
.payment__item_hermes+.payment__item_hermes {
    margin-top: 20px; /* 上に20pxのマージンを設定 */
}

/* クレジットカードの有効期限フィールドの幅設定 */
#cc_exp1 {
    width: 80px; /* 幅を80pxに設定 */
}

#cc_exp2 {
    width: 80px; /* 幅を80pxに設定 */
}



/* --------------------------------
    ページローディング中のCSS
-------------------------------- */

/* ローディング画像のスタイリング */
.loading-image_hermes {
    width: 40px; /* 幅を40pxに設定 */
}



/* --------------------------------
        予約照会に関するcss
-------------------------------- */

/* 問い合わせエラーメッセージのスタイリング */
.inquiry__error_hermes {
    color: red; /* テキスト色を赤に設定 */
    text-align: center; /* テキストを中央揃えに設定 */
}