@charset "UTF-8";
/* html, body, main
-------------------------------- */
html, body, main {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}
body {
    font-family: sans-serif;
    font-size: 14px;
    color: #000000;
    margin: unset;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    word-wrap:break-word;
}
main.contents_wapper {
    width: 90%;
    margin: 0 auto;
}
main.mt_menu {
    margin-top: 84px;
}

::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
}

.d_flex {
    display: flex;
}
/* background */
.back_light_gray {
    background: #F2F2F2;
}
.back_input {
    background: #D9D9D9;
}
.back_gray {
    background: #808080;
}
.back_white {
    background: #ffffff;
}
.back_yellow {
    background: #FFBE43;
}
.back_light_blue {
    background: #0097D9;
}
/* border */
.border_gray {
    border-bottom: 1px solid #808080;
}
.border_top_gray {
    border-top: 1px solid #808080;
}
.border_yellow {
    border-bottom: 1px solid #FFBE43;
}
.border_light_gray {
    border: 2px solid #D9D9D9;
}
/* font */
.font_white {
    color: #ffffff;
}
.font_gray {
    color: #808080;
}
.font_blue {
    color: #003CA6;
}
.font_red {
    color: #F0454E;
}
.font_bold {
    font-weight: bold;
}
.font_nomal {
    font-weight: normal;
}
.text_center {
    text-align: center;
}
.text_right {
    text-align: right;
}
.text_left {
    text-align: left;
}
.form_small_text {
    font-size: 0.8rem;
}
h2.page_title {
    font-size: 1.2rem;
    margin: 0.5em 0;
}
h2.page_title_blank {
    margin-bottom: 2.5em;
}
h3.form_inner_title {
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    font-size: 1rem;
}
a.list_link_color, a.list_link_color:hover {
    color: #000000;
}
/* logo */
h1.logo a {
    display: block;
}
h1.logo {
    margin: 0.5em 0;
    z-index: 9999;
}
h1.logo a img {
    width: 150px;
}
.p_re {
    position: relative;
}
h1.p_ab {
    position: absolute;
    top: 5px;
    left: 25px;
}
/* img */
img {
    width: 100%;
}
/* margin */
dl, dd, ul, p, h3, h4 {
    margin: 0;
}
.mb05em {
    margin-bottom: 0.5em;
}
.mb1em {
    margin-bottom: 1em;
}
.mb2em {
    margin-bottom: 2em;
}
/* padding */
ul {
    padding: 0;
}
/* style */
ul {
    list-style: none;
}
a, a:hover {
    text-decoration: none;
    color: #FFBE43;
}
/* width */
.inner_width {
    width: 94%;
    margin: 0 auto;
    padding: 3% 0;
}
table, tbody, tr {
    width: 100%;
    display: block;
}
/* checkbox--------------- */
.checkbox {
    display: none;
}
.pseudo_checkbox {
    padding-left: 30px;
    position:relative;
    margin-right: 20px;
}
.pseudo_checkbox::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #FFBE43;
    border-radius: 0;
    background: #ffffff;
}
.checkbox:checked + .pseudo_checkbox::after {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 77%;
    width: 5px;
    height: 14px;
    transform: rotate(45deg);
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
}
.checkbox:checked + .pseudo_checkbox::before {
    background: #FFBE43;
}
/* radio
-------------------------------- */
dd.radio_list .form_radio {
    display: none;
}
dd.radio_list .form_radio + .payment_method_radio_text{
    padding-left: 30px;
    position:relative;
}
dd.radio_list .form_radio + .payment_method_radio_text::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #FFBE43;
    border-radius: 50%;
}
dd.radio_list .form_radio:checked{
    color: #FFBE43;
}
dd.radio_list .form_radio:checked + .payment_method_radio_text::after{
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
    background: #FFBE43;
    border-radius: 50%;
}
.payment_method_radio_item1 {
    margin-right: 2em;
}
/* fixed--------------- */
.p_fixed {
    position: fixed;
    width: 90%;
    height: 215px;
    z-index: 1;
}
.fixed_element {
    margin-top: 215px;
}
/* button--------------- */
.btn_style {
    border-radius: 20px;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0.5em 0;
    font-size: 0.8rem;
}
.buttons button, .singl_button button, .menu_buttons button, .login_button button {
    width: 80%;
    display: block;
    margin: 0 auto;
    border-radius: 30px;
    font-size: 1rem;
    padding: 0.8em 0;
}
.login_button button:first-of-type {
    margin-bottom: 1em;
}
.singl_button button.invoice_btn {
    padding: 0.5em 0;
}
.buttons {
    margin-bottom: 2em;
    padding-top: 2em;
}
.buttons button, .menu_buttons button {
    margin-bottom: 1em;
}
.buttons a {
    display: block;
    margin-bottom: 1em;
}
.buttons button:last-of-type, .menu_buttons button:last-of-type {
    margin-bottom: 0;
}
.singl_button {
    padding-top: 1.5em;
    margin-bottom: 1em;
}
.cancel_btn_wrap {
    padding-top: 1em;
}
.border_all_yellow2, .border_all_gray2 {
    background: none;
}
.border_all_yellow2 {
    border: 2px solid #FFBE43;
}
.border_all_gray2 {
    border: 2px solid #808080;
}
/* pop_up--------------- */
.pop_up_contents {
    width: 210px;
    margin: 0 auto;
    margin-top: 10em;
}
.web_pop_up_contents {
    width: 250px;
}
.pop_up_img img {
    width: 100px;
    margin: 0 auto;
    display: block;
    margin-bottom: 1em;
}
.web_pop_up_contents img {
    padding-right: 1em;
    width: 120px;
}
.pop_up_inner_style1 {
    padding: 3em 3em 2.5em;
}
.pop_up_inner_style2 {
    padding: 2em 1em;
}
.pop_up_inner_style3 {
    padding: 2em 1em 1em;
}
.pop_up_button_wrap button:first-of-type {
    margin-right: 10%;
}
.pop_up_button_wrap button {
    width: 45%;
    margin-bottom: 1em !important;
    padding: 0.5em;
    font-size: 0.8rem;
}
.pop_up_inner_style2 .pop_up_text {
    padding: 0.5em 1.5em 2em;
}
/* モーダルCSS */
.modalArea {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
}
.modalWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.modalContents iframe {
    border: none;
}
/* list--------------- */
.common_list_style {
    padding-top: 1em;
    margin-top: 1em;
}
.common_list_item_style {
    padding: 0 0.5em 0;
    margin-bottom: 1em;
}
.common_list_item_style:last-of-type {
    margin-bottom: 0;
}
.list_item_detail {
    margin-bottom: 0.8em;
}
.list_item_detail:last-of-type {
    margin-bottom: 0;
}
.list_item_title, .common_list_style, .list_item_detail {
    font-size: 1rem;
}
.common_list_item_title {
    width: 40%;
    margin-right: 3%;
}
.common_list_item_detail {
    width: 57%;
}
.web_common_list_item_title {
    width: 50%;
    margin-right: 3%;
}
.web_common_list_item_detail {
    width: 47%;
}
.common_list_item_inner_space {
    padding-bottom: 1em;
}
.common_list_item_title_size, .common_list_item_detail_size {
    font-size: 0.9rem;
}
.common_list div {
    margin-bottom: 0.5em;
}
.common_list div:last-of-type {
    margin-bottom: 0;
}
/* form--------------- */
span.from {
    width: 6%;
    margin: 0 2%;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
input.start_date, input.end_date {
    width: 45%;
    height: 36px;
}
/* input */
input[type="text"], input[type="date"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"]  {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: none;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0.8em 0.5em;
    font-size: 0.8rem;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"] {
    width: 100%;
}
/* message--------------- */
.page_top_message {
    font-size: 1rem;
    padding-top: 0.5em;
}
.error_message {
    font-size: 0.8rem;
    padding: 0.5em 0;
}
.form_top_error_message {
    font-size: 1rem;
    padding-top: 1em;
    margin-bottom: 1em;
}
.input_form_wrap label.error {
    font-size: 0.8rem;
    padding: 0.5em 0;
    color: #F0454E;
}
/* product--------------- */

/* list */
.item_list_common_products_img {
    width: 35%;
    margin-right: 5%;
}
dl.item_list_common_products_dl {
    width: 60%;
}
.item_list_common_products {
    margin-bottom: 1em !important;
}
dl.item_list_common_products_dl dd {
    margin-bottom: 0.5em;
}
dl.item_list_common_products_dl dd:last-of-type {
    margin-bottom: 0;
}
.cancel_btn_wrap button {
    width: 70px;
}

.product_item_row {
    height: 180px;
}
.product_item_row img {
    width: auto;
    height: 100%;
}
.no-image-placeholder {
    width: 100%;
    aspect-ratio: 1; /* または固定の height */
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    border: 1px solid #ddd;
}

.badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}
/* 商品リストのバッジ */
.badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-icon {
    width: 14px;
    height: 14px;
}

.badge-new {
    background-color: #ff4757;
}

.badge-change {
    background-color: #2e86de;
}

/* 親要素に position: relative を追加 */
.product_item a {
    position: relative;
}