/* これがないとサファリのボタンが変な感じになる */
a[type='button'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.text-red {
	color: #FF2D16;
}

.incidental-work-table {
	width: 100%;
}

@media screen and (max-width:1100px) {
	.incidental-work-table {
		width: 100%;
	}
}

/* top */
@media screen and (max-width:1100px) {
	.pc_top_img {
		display: none;
	}
}

.hero_container_sen_box {
	background-color: rgba(0, 0, 0, 0.2);
	height: 100%;
}

.hero_container_sen_box p {
	text-align: center;
	color: #FFFFFF;
}

.backdrop_filter {
	backdrop-filter: blur(5px);
}

.appeal_middle_sen {
	font-size: 2.7rem;
}

/* @media screen and (max-width:1100px) { */
@media screen and (max-width:765px) {
	.appeal_middle_sen {
		font-size: 1.6rem;
	}
}

.appeal_big_sen {
	font-size: 3.4rem;
}

/* @media screen and (max-width:1100px) { */
@media screen and (max-width:765px) {
	.appeal_big_sen {
		font-size: 2.0rem;
	}
}

.appeal_small_sen {
	font-size: 1.6rem;
}

/* @media screen and (max-width:1100px) { */
@media screen and (max-width:765px) {
	.appeal_small_sen {
		font-size: 1.0rem;
	}
}

/* ヒーローページ内のボタン配置 */
.hero_container .btn_area {
	display: none;
}

@media screen and (max-width:1100px) {
	.hero_container .btn_area {
		display: block;
		margin: 9px auto 8px;
	}
}

/* こんな人に選ばれています */
.needs_box {
	width: 31%;
}

@media screen and (max-width:1100px) {
	.needs_box {
		width: 100%;
	}
}

.needs_box_tit {
	text-align: center;
	font-weight: lighter;
	margin-bottom: 21px;
}

@media screen and (max-width:1100px) {
	.needs_box_tit {
		margin-bottom: 10px;
	}
}

.needs_box_container figure {
	text-align: center;
}

@media screen and (max-width:1100px) {
	.needs_box_container figure img {
		width: 64px;
		height: 64px;
	}
}

.needs_box_container_sen_box {
	width: 100%;
	height: 200px;
	border-radius: 13px;
	background: #FFFFFF;
	padding: 32px;
	margin-bottom: 24px;
	position: relative;
}

@media screen and (max-width:1100px) {
	.needs_box_container_sen_box {
		height: auto;
		padding: 15px;
		margin: 0 10px 24px;
	}
}

.needs_box_container_sen_box::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 30%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #FFFFFF;
	border-right: 15px solid #FFFFFF;
}

@media screen and (max-width:1100px) {
	.needs_box_container_sen_box::before {
		content: "";
		position: absolute;
		top: 60%;
		left: 100%;
		margin-left: -15px;
		border: 15px solid transparent;
		border-top: 15px solid #FFFFFF;
		border-left: 15px solid #FFFFFF;
	}

	.comment::before {
		content: "";
		position: absolute;
		top: 80%;
		left: 0;
		margin-top: -15px;
		border: 15px solid transparent;
		border-right: 15px solid #FFFFFF;
		border-top: 15px solid #FFFFFF;
	}
}

.needs_box_container_sen_box_sen {
	color: #5A5A5A;
}

@media screen and (max-width:1100px) {
	.needs_box_container {
		display: flex;
		align-items: center;
	}

	.flex_reverse {
		flex-direction: row-reverse;
	}
}

/*-------------------------

        使い方

---------------------------*/
.use_box {
	width: 300px;
	max-width: 100%;
	height: 380px;
	margin: 0 auto 20px auto;
	background: #F7F7F7;
}

@media screen and (max-width:1100px) {
	.use_box {
		height: 300px;
	}
}

.use_img_box {
	position: relative;
	font-size: 0;
}

.use_img_box p {
	width: 100%;
	text-align: center;
	position: absolute;
	font-size: 1.5rem;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	color: white;
}

/* 使い方の写真 */
.use_img_box img {
	width: 100%;
}

@media screen and (max-width:1100px) {
	.use_img_box img {
		height: 205px;
	}
}

.use_img_box::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #0000004D;
	opacity: 0.8;
}

.use_box_sen {
	padding: 10px;
	line-height: 2.2;
}

@media screen and (max-width:1100px) {
	.use_box_sen {
		line-height: 1.4;
	}
}

@media screen and (max-width:1100px) {
	.yagirusi_how {
		display: none;
	}
}

/* 交換タイヤの特徴 */
@media screen and (max-width:1100px) {
	#features .flex_box {
		display: flex;
	}
}

.features_box {
	width: 240px;
	text-align: center;
	margin-bottom: 40px;
}

@media screen and (max-width:765px) {
	.features_box {
		width: 150px;
	}
}

.features_box_sen {
	color: #707070;
}

@media screen and (max-width:765px) {
	.features_box figure img {
		width: 87px;
		height: auto;
	}
}

/* 交換タイヤでできること */
.possible_box {
	width: 23%;
	border: 2px solid #FF2D16;
	padding: 26px 10px 28px 14px;
	margin-right: 10px;
}

.possible_box:last-child {
	margin-right: 0;
}

@media screen and (max-width:1100px) {
	.possible_box:last-child {
		margin-right: auto;
	}

	.possible_box {
		width: 48%;
		/* margin-right: 0; */
		margin: 0 auto 24px;
	}
}

@media screen and (max-width:765px) {
	.possible_box {
		width: 100%;
		/* margin-right: 0; */
	}
}

.possible_box_tit {
	text-align: center;
	font-size: 1.5rem;
	height: 30px;
}

.possible_box figure {
	width: 180px;
	height: 120px;
	margin: 72px auto;
	display: flex;
	align-items: center;
}

@media screen and (max-width:765px) {
	.possible_box figure {
		margin: 48px auto;
	}
}

.possible_box figure img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.possible_box_sen {
	color: #707070;
	line-height: 2.2;
}

@media screen and (max-width:1100px) {
	.flex_possible {
		display: flex;
		flex-wrap: wrap;
	}
}

/* 交換タイヤの仕組み */
.works_container_img_box {
	text-align: center;
	margin: 96px auto 48px;
}

@media screen and (max-width:1100px) {
	.works_container_img_box {
		margin: 56px auto 16px;
	}

	.works_container_img_box figure img {
		max-width: 100%;
		height: auto;
	}
}

.works_container_sen_box_sen {
	width: 85%;
	margin: auto;
	line-height: 2.2;
	margin-bottom: 30px;
}

@media screen and (max-width:1100px) {
	.works_container_sen_box_sen {
		width: 100%;
	}
}

.works_container_sen_box_sen:last-child {
	margin-bottom: 0;
}

/*----------------------------------

     商品詳細

-------------------------------------*/
/* 商品詳細～写真から説明文まで */
@media screen and (max-width:1100px) {
	.wheel_info_container {
		display: flex;
	}
}

@media screen and (max-width:765px) {
	.wheel_info_container {
		display: block;
	}
}

.wheel_info_container figure {
	width: 30%;
	height: auto;
}

@media screen and (max-width:765px) {
	.wheel_info_container figure {
		width: 100%;
		text-align: center;
	}
}

.product-img {
	width: 40%;
}

@media screen and (max-width:765px) {
	.product-img {
		width: 100%;
	}
}

.product-description {
	width: 60%;
	padding: 10px;
}

@media screen and (max-width:765px) {
	.product-description {
		width: 100%;
		padding: 0px;
	}
}

.wheel_info_tit {
	margin-bottom: 32px;
}

@media screen and (max-width:1100px) {
	.wheel_info_tit {
		margin-bottom: 13px;
	}
}

.wheel_info .wheel_info_price {
	font-size: 2.0rem;
	margin-bottom: 24px;
}

@media screen and (max-width:1100px) {
	.wheel_info .wheel_info_price {
		margin-bottom: 10px;
	}
}

/* カートボタン */
.btn_cart {
	padding: 10px 30px;
	color: #FF2D16;
	border: 1px solid #FF2D16;
	background: #FFFFFF;
	border-radius: 20px;
}

.select_product-details {
	width: 25%;
	margin-right: 10px;
}

.wheel_info_description {
	margin: 24px auto;
}

@media screen and (max-width:1100px) {
	.wheel_info_description {
		margin: 16px auto;
	}
}

/*-------------------------------------

        サイズ・スペック情報

------------------------------------------*/
.size_info_sen {
	font-size: .8rem;
}

@media screen and (max-width:765px) {
	.size_info_sen {
		font-size: .8rem;
	}
}

.size_view a {
	text-align: right;
	display: block;
	color: #68AAF7;
}

@media screen and (max-width:765px) {
	.size_view a {
		font-size: 1.0rem;
	}
}

/*------------------------------------

             店舗情報

---------------------------------------*/
.store_info_container {
	width: 49%;
	padding: 20px;
	background: #E8E8E8;
	margin-bottom: 20px;
	position: relative;
}

.hover-item:hover {
	position: relative;
	cursor: pointer;
	border: solid 1px #ff0000;
}

.hover-item-link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width:1100px) {
	.store_info_container {
		width: 100%;
		padding: 9px 12px 9px 9px;
		margin-bottom: 20px;
	}
}

#product-details .store_info_container {
	width: 100%;
	margin-bottom: 40px;
}

.store_info_container .flex_box {
	margin-bottom: 16px;
}

@media screen and (max-width:1100px) {
	.store_info_container .flex_box {
		margin-bottom: 8px;
		display: flex;
	}
}

.store_info_container .store_info {
	width: 55%;
}

@media screen and (max-width:768px) {
	.store_info_container .store_info {
		padding-top: 0;
	}
}

.store_info_container figure {
	width: 45%;
}

.store_info_container figure img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

@media screen and (max-width:768px) {
	.store_info_container figure {
		padding-top: 0;
	}
}

@media screen and (max-width:768px) {
	.store_info_distance {
		font-size: 1.0rem;
	}
}

.store_info_place {
	font-size: 1.3rem;
}

.store_info_address {
	line-height: 1.5;
}

/*---------------------------

     近くのピットを検索

-----------------------------*/
#search_shop_inner1280 {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 0 20px;
}

#search_shop_inner960 {
	width: 95%;
	max-width: 100%;
	margin: 0 auto 30px auto;
}

#pit-search-details {
	background: #F7F7F7;
}

#search_contents {
	background: #E8E8E8;
	padding: 15px;
}

#shop_search_contents {
	background: #FFFFFF;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.second_option {
	font-size: 1.5rem;
}

.btn-submit {
	width: auto !important;
	min-width: 200px;
	padding: 8px 24px;
	text-align: center;
	background: #FFFFFF;
	border-radius: 20px;
	border: 1px solid #FF2D16;
	display: block;
	color: #FF2D16 !important;
	transition: 0.6s;
	margin: 10px auto;
	white-space: nowrap;
}

.btn_cart:hover,
.btn-submit:hover {
	color: #FFFFFF !important;
	border: 1px solid #FF2D16;
	background: #FF2D16;
	text-decoration: none;
}

.search_results {
	background: #F7F7F7;
	padding: 40px 0;
}

#pit-search-details .gmap {
	margin-bottom: 40px;
}

#map {
	width: 100%;
	height: 540px;
}

.shop_search_tab {
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	padding-top: 3px;
	background: #D0D0D0;
	padding-bottom: 3px;
	margin-top: 30px;
}

.shop_search_tab li {
	width: 45%;
	display: block;
	text-align: center;
	padding: 10px 0;
	color: dimgray;
	background: #D0D0D0;
}

.shop_search_tab li:hover {
	cursor: pointer;
}

.shop_search_tab li.current {
	border-radius: 6px 6px 0 0;
	background: #FFFFFF;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 4px;
	margin-right: 4px;
	position: relative;
	z-index: 1;
}

@media screen and (max-width:768px) {
	#pit-search-details .gmap {
		margin-bottom: 20px;
	}
}

@media screen and (max-width:480px) {
	.shop_search_tab li {
		font-size: 12px;
		padding: 8px 0;
	}
}

@media screen and (max-width:480px) {

	.work-time-modal .modal-dialog,
	.tire-detail-modal .modal-dialog {
		max-width: calc(100% - 24px);
		margin: 12px auto;
	}

	.work-time-modal .modal-body,
	.tire-detail-modal .modal-body {
		padding: 12px;
	}

	.work-time-modal .modal-title,
	.tire-detail-modal .modal-title {
		font-size: 1rem;
	}

	.work-time-modal .work-time-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.work-time-modal table {
		min-width: 520px;
		font-size: 12px;
	}

	.tire-detail-modal .wheel_info_container {
		display: block;
	}

	.tire-detail-modal .wheel_info_container figure {
		width: 100%;
	}

	.tire-detail-modal .carousel_img,
	.tire-detail-modal .itemimage_large {
		max-height: 200px;
		object-fit: contain;
	}
}

.a_info_window {
	border-radius: 20px;
	border: 1px solid #FF2D16;
	display: block;
	color: #FF2D16 !important;
	transition: 0.6s;
	margin: 10px auto;
}

.a_info_window:hover {
	color: #FFFFFF !important;
	border: 1px solid #FF2D16;
	background: #FF2D16;
	text-decoration: none;
}

/*-----------------------------------

        pit-details.html
        ピット詳細

------------------------------------*/
.details_01,
.details_02,
.details_03,
.details_04 {
	padding: 30px 0;
}

@media screen and (max-width:768px) {

	.details_01,
	.details_02,
	.details_03,
	.details_04 {
		padding: 15px 0;
	}
}

#details .store_info_place>span {
	margin-left: 8px;
}

#details .flex_box {
	margin: 10px auto;
	flex-wrap: nowrap;
}

@media screen and (max-width:1100px) {
	#details .flex_box {
		margin: 15px auto;
		display: flex;
	}
}

.details_01_appeal {
	width: 80px;
	height: 80px;
	display: flex;
	line-height: 1.5;
	background: #FF2D16;
	color: #FFFFFF;
	align-items: center;
	margin-right: 15px;
}

.details_01_appeal:last-child {
	margin-right: 0;
}

@media screen and (max-width:768px) {
	.details_01_appeal {
		width: 60px;
		height: 60px;
		margin-right: 6px;
	}
}

.details_01_appeal_sen {
	width: 100%;
	text-align: center;
}

.small_size {
	font-size: 1.2rem;
}

@media screen and (max-width:768px) {
	.small_size {
		font-size: 0.8rem;
	}
}

/* スケジュール確認 */
.section-fee {
	width: 75%;
	margin: 0 auto;
}

@media screen and (max-width:1100px) {
	.section-fee {
		width: 100%;
		margin: 0;
	}
}

.table-fee {
	display: block;
	overflow-x: scroll;
}

@media screen and (max-width:580px) {
	.table-fee {
		display: block;
		overflow-x: scroll;
	}
}

.details_02_select01 {
	width: 120px;
	margin-left: 4px;
}

.details_02_select02 {
	width: 170px;
}

.details_02_box {
	text-align: center;
	border: solid 1px;
}

.schedule_btn_area {
	display: flex;
	justify-content: space-between;
}

.schedule_btn_area .schedule_left,
.schedule_btn_area .schedule_right {
	position: relative;
	top: 4px;
}

#div-unreserbable {
	color: #FF2D16;
	border: solid 1px #FF2D16;
}

.table_center {
	text-align: center;
}

.table_details {
	display: inline-block;
	overflow: hidden;
}

.table_details th,
.table_details td {
	border: 1px solid #707070;
}

.table_details .color-red,
.table_details .color-blue {
	text-decoration: underline;
}

.table_details th {
	background: #E8E8E8;
}

@media screen and (max-width:768px) {
	.table_details th {
		padding: 0 6px;
	}
}

.table_details td {
	width: 80px;
	background: #FFFFFF;
}

@media screen and (max-width:768px) {
	.table_details td {
		width: 40px;
		padding: 6px 3px;
	}
}

@media screen and (max-width:768px) {

	.table_details th,
	.table_details td {
		font-size: 0.4rem;
	}

	.table_details td a {
		font-size: 0.4rem;
	}
}

@media screen and (max-width:768px) {
	.details_02_charge_sen {
		font-size: .8rem;
	}
}

/* レビュー */
#section-userreview {
	overflow-y: scroll;
	height: 100%;
	max-height: 600px;
}

.review_box_top {
	padding-bottom: 8px;
	display: flex;
	justify-content: space-between;
}

.review_box_top_evaluation_box {
	text-align: left;
}

@media screen and (max-width:768px) {
	.review_box_top_evaluation_box_tit {
		font-size: 1.0rem;
	}
}

.review_box_top_evaluation_box_tit>.evaluation_count {
	margin-left: 16px;
	font-size: 3.0rem;
}

@media screen and (max-width:768px) {
	.review_box_top_evaluation_box_tit>.evaluation_count {
		font-size: 2.0rem;
	}
}

.review_box_top_comment_box {
	width: 80%;
	padding: 8px;
	background: #FFFFFF;
}

@media screen and (max-width:768px) {
	.review_box_top_comment_box {
		width: 75%;
		padding: 4px;
	}
}

@media screen and (max-width:768px) {
	.review_box_top_comment_box_sen {
		font-size: .8rem;
		line-height: 1.3;
	}
}

.review_box_bottom {
	padding-top: 8px;
	border-top: 1px solid #707070;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width:768px) {
	.review_box_bottom_date {
		font-size: .8rem;
	}
}

.report_btn {
	color: #68AAF7;
}

@media screen and (max-width:768px) {
	.report_btn {
		font-size: .8rem;
	}
}

/* この店舗で販売しているタイヤ */
.details_boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
}

.details_box {
	border: 1px solid #CBC9C9;
	margin-bottom: 10px;
	margin-right: 2%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 48%;
	max-width: 220px;
	padding: 10px;
	position: relative;
	background-color: white;
}

.details_box_img {
	margin: auto;
}

@media screen and (max-width:768px) {
	.details_box_info {
		padding: 0;
	}
}

@media screen and (max-width:1100px) {
	.details_box_info_name {
		margin-bottom: 0;
	}
}

@media screen and (max-width:768px) {
	.details_box_info_name {
		font-size: 1.1rem;
	}
}

.details_box_info_price {
	border-bottom: 1px solid #FF2D16;
	color: #FF2D16;
}

@media screen and (max-width:768px) {
	.details_box_info_price {
		font-size: 1.0rem;
	}
}

.details_box_info_price span {
	font-size: 1.5rem;
	margin: 0 5px;
}

@media screen and (max-width:1100px) {
	.details_box_info_price span {
		font-size: 4.0rem;
	}
}

@media screen and (max-width:1100px) {
	.details_box_info_price span {
		font-size: 1.5rem;
	}
}

.details_box .search_btn {
	border-radius: 30px;
	margin: 15px auto;
}

@media screen and (max-width:1100px) {
	.details_box .search_btn {
		padding: 4px 0;
	}
}

.carousel_img {
	max-height: 60vh;
	object-fit: contain;
}

@media screen and (max-width:1100px) {
	.carousel_img {
		height: 50vh;
	}
}

@media screen and (max-width:765px) {
	.carousel_img {
		height: 30vh;
	}
}

.carousel-control-prev,
.carousel-control-next {
	z-index: 9998;
}

.info_window_name {
	font-size: 1.3rem;
}

.info_window_text {
	font-size: 1.1rem;
}

/* プラン選択モーダル */
.select-plan {
	transition: .7s ease-in-out;
	min-height: 120px;
}

.disabled-label {
	color: #dcdcdc;
}

/*---------------------------

     forピット&管理者ユーザ

-----------------------------*/
.border-top_red {
	border-top: 4px solid #FF2D16;
}

/* Bootstrapのボタンをカスタマイズ */
.btn-outline-primary {
	color: #FF2D16;
	border-color: #FF2D16;
	width: 100%;
	margin: 5px 0;
	border-radius: 2rem;
	background-color: #ffffff;
}

.btn-outline-primary:hover {
	color: #FFFFFF;
	background-color: #FF2D16;
	border-color: #FF2D16;
}

.btn-outline-primary:disabled {
	color: #FF2D16;
	background-color: #999999;
}

.emsg {
	color: #FF2D16;
	font-size: small;
}

/*---------------------------

     会員登録(PCファースト)

-----------------------------*/

.item_label {
	font-size: x-large;
	font-weight: bold;
	padding: auto;
}

.margin-center {
	margin: 0 auto;
	width: 30%;
	min-width: 700px;
}

@media screen and (max-width:1100px) {
	.margin-center {
		margin: 0 auto;
		width: 75%;
		min-width: 0px;
	}
}

@media screen and (max-width: 765px) {
	.margin-center {
		width: 100%;
		padding: 10px;
		min-width: 0px;
	}
}

/* 画像ドラッグアンドドロップ */
#dragDropArea {
	background-color: #f4f4f4;
	padding: 10px;
	border: #ddd dashed 5px;
	min-height: 200px;
	text-align: center;
}

#dragDropArea p {
	color: #999;
	font-weight: bold;
	font-size: 1.4em;
}

#dragDropArea .drag-drop-buttons {
	margin-top: 20px;
	font-size: 1.2em;
}

.drag-drop-buttons input {
	margin: auto;
}

#previewImage {
	width: 100%
}

/*---------------------------

     管理者招待メール画面

-----------------------------*/
.dis-flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.main-panel {
	height: calc(100% - 67px);
	/* 画面の高さ - ヘッダーの高さ */
}

/*サブメニューパネル*/
.submenu {
	flex: 0 0 200px;
	/* サブメニューは270px固定 */
	border-right: 1px solid #c0c0c0;
	height: 100%;
	overflow: auto;
	border-top: 4px solid rgb(245, 73, 73);
	background-color: rgb(245, 73, 73);
}

#submenu-wrapper * {
	cursor: pointer;
	border-radius: 0;
}

/* 中央パネル */
.central-panel {
	flex: 0 0 auto;
	width: 75%;
	min-width: 150px;
	height: 100%;
	min-height: 200px;
	margin: 10px 0 0 20px;
}

.central-panel-title {
	width: 100%;
	height: 30px;
	background-color: rgb(245 73 73/ 60%);
}

.central-panel-pass {
	margin-bottom: 0;
	color: #a8a0a0;
	font-size: 13px;
}

.title-p {
	color: #ffffff;
	padding: 3px 0 3px 15px;
}

/* ヘッダ */
.header_menu {
	border-top: 4px solid rgb(255, 100, 100);
	border-bottom: 1px solid #c0c0c0;
}

.logo {
	width: 70px;
	height: 45px;
	display: inline-block;
	margin-right: 100px;
}

/* フッター */
.pt-3 {
	background-color: rgb(0, 0, 3);
	color: white;
	text-align: center;
}

li {
	list-style: none;
}

.side_menu_ul {
	padding: 15px 0 0 15px;
}

.submenu_list {
	color: white;
}

.bodycontainer__ss {
	padding: 20px 30%;
}

/*---------------------------

     一般ユーザー登録フォーム

-----------------------------*/
.form-part {
	background-color: white;
	padding: 10px;
	margin-bottom: 30px;
}

.form-part h4 {
	padding: 10px 0px 10px 0px;
	font-weight: bold;
}

.required {
	color: red;
	font-weight: normal;
}

/*--------------------------------

      footer

----------------------------------*/
footer {
	background: #000000;
	color: #FFFFFF;
	width: 100%;
	height: 250px;
}

@media screen and (max-width:1100px) {
	footer {
		/* モバイル版フッターの高さ指定*/
		height: 500px;
	}
}

.flex_footer {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

@media screen and (max-width:1100px) {
	.flex_footer {
		display: block;
		margin-bottom: 48px;
	}
}

.flex_footer__box {
	margin: 0 36px;
}

@media screen and (max-width:1100px) {
	.flex_footer__box {
		margin: 0 0 32px 0;
	}
}

.flex_footer__box__tit {
	font-size: 1.0rem;
	font-weight: lighter;
	margin-bottom: 22px;
	color: #FFFFFF;
}

@media screen and (max-width:1100px) {
	.flex_footer__box__tit {
		font-size: 1.0rem;
		margin-bottom: 8px;
	}
}

.flex_footer__box ul li {
	list-style-type: none;
	line-height: 1.3;
}

@media screen and (max-width:1100px) {
	.flex_footer__box ul li {
		line-height: 1;
	}
}

.flex_footer__box ul li a {
	/* 	font-size: 1.8rem; */
	font-size: 1.0rem;
	color: #FFFFFF;
}

@media screen and (max-width:1100px) {
	.flex_footer__box ul li a {
		font-size: 1.0rem;
	}
}

.footer_copy_right_box {
	text-align: center;
}

@media screen and (max-width:1100px) {
	.footer_copy_right_box figure img {
		width: 110px;
		height: auto;
	}
}

.footer_copy_right_box p {
	/* 	font-size: 1.5rem; */
	font-size: 1.0rem;
	font-weight: lighter;
}

@media screen and (max-width:1100px) {
	.footer_copy_right_box p {
		font-size: .5rem;
	}
}

.sp_nav {
	display: none;
	width: 100%;
	/* 	padding: 0 24px; */
	background: #FFFFFF;
}

@media screen and (max-width:1100px) {
	.sp_nav {
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
}

.sp_nav ul {
	width: 100%;
	display: flex;
	justify-content: space-around;
}

.sp_nav ul li {
	margin-right: 0;
	padding: 10px 0 5px 0;
	display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* ログアウトのform：margin打ち消し＋li内で中央に揃える */
	.sp_nav ul li form {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	/* ログイン・ログアウト（いずれも最後の項目）のアイコン・テキストを他項目と高さを揃えて少し上に寄せる */
	.sp_nav ul li:last-child a,
	.sp_nav ul li form a {
		transform: translateY(-2px);
}

.sp_nav ul li a figure {
	width: 50px;
	text-align: center;
	margin: auto;
}

.cart {
	position: relative;
	left: 3px;
}

/*------------------------

	プライバシーポリシー画面、利用規約画面、特定商取引法画面

--------------------------*/

/* パンクズリストの設定 */
.breadcrumb_box ul li {
	display: table-cell;
}

.breadcrumb_box li:after {
	content: '>';
	padding: 0 0.3em;
}

.breadcrumb_box li:last-child:after {
	content: '';
}

/* 全体のボックスの設定 */
.contents_body {
	width: 60%;
	margin: 70px auto 0 auto;
	min-height: calc(100vh - 307px);
	display: block;
	overflow-x: scroll;
}

@media screen and (max-width:1100px) {
	.contents_body {
		padding: 0 10px;
		margin-top: 0px;
		width: 100%;
	}
}

/* h1タイトルの設定 */
.h1_setting {
	font-weight: bold;
	border-bottom: 1px solid #333;
	padding: 0 0 8px 0px;
}

/* セクションごとの設定 */
.help_section {
	line-height: 1.8;
}

.help_section dt {
	border-radius: 5px;
	background: #EEEEEE;
	padding-left: 10px;
}

.help_section dd {
	margin: 0px 0 12px 0;
}

/* 制定日の設定 */
.enactment_date {
	text-align: right;
}

/*------------------------

	よくある質問画面

--------------------------*/
.adjust-position-main {
	padding-top: 70px;
	margin-top: -70px;
}

@media screen and (max-width:580px) {
	.col-3-mobile {
		max-width: 100%;
		padding-bottom: 10px;
	}

	.adjust-position-main {
		padding-top: 0px;
		margin-top: 0px;
	}
}

/*------------------------

	お客様情報変更画面

--------------------------*/
.edit-confirm {
	height: 630px;
	padding-top: 70px;
}

/*------------------------

	ショッピングカート

--------------------------*/
.inner50 {
	width: 50%;
	margin: 20px auto;
}

@media screen and (max-width:768px) {
	.inner50 {
		width: 100%;
		margin: 0px;
		padding: 10px;
	}
}

.cart_title h2 {
	font-size: 32px !important;
}

.change_btn {
	color: #707070;
	border-radius: 4px;
	border: 0.5px solid #707070;
}

.shopping_container {
	margin: 40px auto;
}

.first_width {
	width: 45%;
}

.second_width {
	width: 15%;
	text-align: center;
}

.third_width {
	width: 40%;
	text-align: right;
}

.btn-submit span {
	font-size: 16px;
}

.empty_btn {
	margin-top: 16px;
	display: inline-block;
}

.history_box {
	border: solid 1px #707070;
	padding: 8px 15px;
	display: flex
}

.history_item_detail_btn {
	padding: 0.5em 1em;
	text-decoration: none;
	border-radius: 3px;
	font-weight: bold;
	color: #FFF;
	background-image: linear-gradient(#c9c9c9 0%, #828282 100%);
	transition: .4s;
}

.history_item_detail_btn:hover {
	background-image: linear-gradient(#c9c9c9 50%, #828282 100%);
}

#history-paid table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	border: solid 1px #707070;
}

@media screen and (max-width:1100px) {

	#history-paid table th,
	#history-paid table td {
		font-size: 12px;
	}
}

#history-paid table td.sum_frame {
	border: solid 3px #FF2D16;
}

.card-input-field table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

.card-input-field table th,
.card-input-field table td {
	font-size: 16px;
	border: solid 1px #707070;
	vertical-align: middle;
}

/* 2列目以降のセルの左だけ線を表示 */
.card-input-field table tr td+td {
	border-left: 1px solid #497285;
}

/* 2行目以降のセルの上だけ線を表示 */
.card-input-field table tr+tr td {
	border-top: 1px solid #497285;
}

@media screen and (max-width:1100px) {

	.card-input-field table th,
	#history-unpaid table td {
		font-size: 12px;
	}
}

.box_right {
	margin-left: auto;
}

#reviewRate {
	width: 40%;
	margin-right: auto;
}

#reviewRate_h2 {
	padding: 10px 10px 0 0;
}

/*------------------------

	一般ユーザ

--------------------------*/
.mainbody {
	/* フッターの高さ分のマージン*/
	min-height: calc(100vh - 250px);
	display: block;
	overflow-x: scroll;
}

/*------------------------

	ピットユーザ

--------------------------*/
.h-70 {
	height: 70px;
}



.maincolumn {
	/* navbarとfooter合わせて142px */
	min-height: calc(100vh - 142px);
	display: block;
	overflow-x: scroll;
	/* TODO: これ外すとpタグは画面からはみ出さなくなるけど、ちょびっとだけ横スクロールできるようになる */
	/* 	white-space: nowrap; */
	-webkit-overflow-scrolling: touch;
}

.heading {
	background: #FDD9D5;
	padding: 5px;
	font-size: 1.0rem;
	border-radius: 5px;
}

.form-control-disabled {
	background: white !important;
}

.hover-link {
	color: #007bff !important;
}

.hover-link:hover {
	cursor: pointer !important;
}

/* for bootstrap-datepicker */
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
	color: #f00;
}

.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
	color: #00f;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
	background-color: #337ab7;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bootstrap-datetimepicker-widget table td span.active,
.bootstrap-datetimepicker-widget table td i.active {
	background-color: #337ab7;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.itemimage {
	height: 150px;
	width: 150px;
	object-fit: cover;
}

.itemimage_middle {
	height: 250px;
	width: 200px;
	object-fit: cover;
}

.itemimage_large {
	height: 300px;
	width: 300px;
	object-fit: cover;
}

/* ファイル選択ボタンのカスタマイズ */
.inputFileLabel {
	padding: .25rem .5rem;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .2rem;
	color: #6c757d;
	cursor: pointer;
	border: 1px solid #6c757d;
}

.inputFileLabel:hover {
	color: #ffffff;
	background-color: #6c757d;
}

input[type="file"] {
	display: none;
}

/* スピナー表示 */
.spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2a2a2a55;
	text-align: center;
	color: #FFF;
	z-index: 9999;
	visibility: hidden;
}

.loader,
.loader:before,
.loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load7 1.8s infinite ease-in-out;
	animation: load7 1.8s infinite ease-in-out;
}

.loader {
	color: #ffffff;
	font-size: 10px;
	position: fixed;
	top: 45vh;
	left: 50%;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}

.loader:before {
	left: -3.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loader:after {
	left: 3.5em;
}

/* ここ、ソースを自動整形すると崩れてスピナーが表示されなくなるので注意 */
@-webkit-keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

@keyframes load7 {

	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}

	40% {
		box-shadow: 0 2.5em 0 0;
	}
}

.show {
	visibility: visible;
}

.spinner {
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.spinner.show {
	opacity: 1
}

.badge {
	position: absolute;
	border-radius: 50%;
	background: #FF2D16;
	color: white;
	margin: 2px 0 0 2px;
}

.order-status-badge {
	position: static !important;
	top: auto !important;
	margin: 0 !important;
	border-radius: 0.2rem !important;
	display: inline-block;
	padding: 0.5em 0.5em;
	font-weight: 500;
	font-size: 1rem;
}

.order-status-badge.badge-secondary {
	background-color: #6c757d;
	color: #fff;
}

.order-status-badge.badge-warning {
	background-color: #ffc107;
	color: #212529;
}

.order-status-badge.badge-info {
	background-color: #17a2b8;
	color: #fff;
}

.order-status-badge.badge-success {
	background-color: #28a745;
	color: #fff;
}

/* 受注一覧の予約番号カラム幅 */
#order-list th:nth-child(1),
#order-list td:nth-child(1) {
	width: 8% !important;
	min-width: 70px;
	white-space: nowrap;
}

#order-list th:nth-child(2),
#order-list td:nth-child(2) {
	width: 14% !important;
	min-width: 120px;
	white-space: nowrap;
}

#order-list th:nth-child(3),
#order-list td:nth-child(3) {
	width: 30% !important;
	min-width: 240px;
}

#order-list th:nth-child(4),
#order-list td:nth-child(4) {
	width: 14% !important;
	min-width: 120px;
}

#order-list th:nth-child(5),
#order-list td:nth-child(5) {
	width: 12% !important;
	min-width: 110px;
	white-space: nowrap;
}

#order-list th:nth-child(6),
#order-list td:nth-child(6) {
	width: 22% !important;
	min-width: 140px;
	white-space: nowrap;
}

#order-list td:nth-child(3) {
	word-break: break-word;
}

/* 受注一覧の縦ボーダーを非表示（S2と同様） */
#order-list th:not(:first-child),
#order-list td:not(:first-child) {
	border-left: none !important;
}

#order-list>thead>tr>th:not(:last-child),
#order-list>tbody>tr>td:not(:last-child) {
	border-right: none !important;
}

/* 受注一覧のセル内コンテンツを縦中央寄せ */
#order-list td:nth-child(1),
#order-list td:nth-child(2),
#order-list td:nth-child(4),
#order-list td:nth-child(5),
#order-list td:nth-child(6) {
	vertical-align: middle;
}

.badge-footer {
	margin: 0 0 0 -12px;
}

/* 受注一覧のステータスカード間隔を調整 */
.order-status-row {
	margin-left: -8px;
	margin-right: -8px;
	display: flex;
	flex-wrap: wrap;
}

.order-status-col {
	padding-left: 8px;
	padding-right: 8px;
}

.scroll-table {
	display: block;
	overflow-x: scroll;
	white-space: nowrap;
}

/* テーブルの幅を大きめに直接指定して、横スクロールを実装した時も幅いっぱいまでborderが伸びるようにする */
.scroll-table td {
	width: 2000px;
}

/* 固定幅にしてチェックボックス列が広がらないようにする */
#process-number-table th:first-child,
#process-number-table td:first-child,
#process-status-table th:first-child,
#process-status-table td:first-child {
	width: 35px;
	min-width: 35px;
	max-width: 35px;
}

/* 印刷設定のツールチップみたいなもの */
.print-setting {
	position: relative;
}

.btn-style {
	color: #707070;
	background: #fff;
	border-radius: 0.5vh;
	background: linear-gradient(180deg, #fafafa 0, #cbc9c9);
}

.search-btn-style {
	color: #fff;
	background: #7b7b7b;
	border-radius: 0.5vh;
	width: 70px;
}

.pushed-btn {
	background: linear-gradient(0deg, #fafafa 0, #cbc9c9);
}

.not-selected-tab {
	background: #f8f9fa;
}

.header-shopname {
	width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: beige;
}

.header-service-status {
	width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #FFDDFF;
}

.header-panels {
	display: none;
}

.header-table {
	display: grid;
}

@media (max-width:599px) {

	.header-panels {
		display: block;
	}

	.header-table {
		display: none;
	}
}

.password-wrapper {
	position: relative;
}

.password-show-hide-button {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

/*------------------------

	サイドバー

--------------------------*/

.sidebar {
	width: 220px;
	height: 100%;
}

.nav-menu {
	display: none;
	/* color: white; */
}

.nav-menu ul {
	margin-bottom: 0;
}

.nav-menu li {
	height: 32px;
}

.nav-menu a {
	color: white;
	font-size: 14px;
}

.nav-button {
	padding: 6px 14px;
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
}

/* アイコン */
.nav-button::before {
	content: "";

	background-size: cover;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

/* アイコン admin */

.icon-home::before {
	background-image: url("../image/admin/sidebar_home.png");
}

.icon-customer::before {
	background-image: url("../image/admin/sidebar_customer.png");
}

.icon-shop::before {
	background-image: url("../image/admin/sidebar_shop.png");
}

.icon-percent::before {
	background-image: url("../image/admin/sidebar_percent.png");
}

.icon-salary::before {
	background-image: url("../image/admin/sidebar_salary.png");
}

.icon-setting::before {
	content: "";
	background-image: url("../image/setting.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 19px;
	height: 19px;
}

/* アイコン parent */

.icon-note::before {
	background-image: url("../image/credit-card.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	margin-left: -1px;
	width: 20px;
	height: 20px;
}

/* アイコン pit */

.icon-tire::before {
	content: "";
	background-image: url("../image/pixel_calender.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 17px;
	height: 17px;
}

.icon-question::before {
	background-image: url("../image/pit/sidebar_question.png");
}

.icon-graph::before {
	content: "";
	background-image: url("../image/graph.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 17px;
	height: 17px;
}

.icon-calendar::before {
	content: "";
	background-image: url("../image/pixel_calender.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 17px;
	height: 17px;
}

.icon-clock::before {
	content: "\f017";
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	font-size: 16px;
	color: #FFFFFF;
	background-image: none;
	line-height: 16px;
	text-align: center;
}

.icon-service::before {
	content: "";
	background-image: url("../image/pixel_calender.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 17px;
	height: 17px;
}

/* 閉じている時 */
.nav-button::after {
	content: "";
	background-image: url("../image/chevron_left.png");
	background-size: cover;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: auto;
	transition: 0.3s ease;
}

/* 開いている時 */
.nav-button.active::after {
	background-image: url("../image/chevron_down.png");
}

/* ヘッダー 管理者 */

.header-status {
	background-color: #F5F4DE;
	width: 150px;
	height: 30px;
	text-align: center;
}

.header-info {
	display: flex;
	margin-left: auto;
	margin-right: 28px;
	font-weight: bold;
}

.header-info .flex {
	display: flex;
	align-items: center;
	margin-right: 18px;
}

.header-info .number {
	background-color: #EA5E5E;
	color: white;
	width: 18px;
	height: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 4px;
}

/* ヘッダー 店舗管理 */

.header-height {
	height: 68px;
}

.header-name {
	font-weight: bold;
	margin-left: 20px;
	margin-right: 39px;
}

.header-parent-name {
	font-weight: bold;
	margin-left: 20px;
}

@media screen and (min-width:1024px) {

	.sidebar-header-parent-name,
	.sidebar-header-name {
		display: none;
	}
}

@media screen and (max-width:1024px) {

	.header-parent-name,
	.header-name {
		display: none;
	}

	.sidebar-header-parent-name {
		padding-top: 6px;
	}

	.sidebar-header-name {
		padding-top: 6px;
	}

	.sidebar-header-parent-name,
	.sidebar-header-name {
		margin-left: 40px;
		margin-bottom: 6px;
		color: white;
		font-size: 14px;
	}
}

/* .header-logout-form {
	margin-left: 28px;
} */

.sidebar-logout-form {
	display: none;
}

.side-hidden-menu {
	display: none !important;
}

.side-bar-info {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

@media screen and (max-width:1024px) {
	.header-logout-form {
		display: none;
	}

	/* .btn-outline-secondary {
		border-color: #FFFFFF;
		color: #FFFFFF;
	} */
	.hidden-menu {
		display: none !important;
	}

	.side-hidden-menu {
		display: flex !important;
		padding: 6px 14px;
	}

	.side-hidden-menu a {
		color: #FFFFFF;
	}

	/* .btn-outline-secondary:hover {
		border-color: #FFFFFF;	
		color: #FFFFFF;
	} */
	.side-bar-info .number {
		background-color: #FFFFFF;
		width: 16px;
		height: 16px;
		margin: 4px 0px 0px 4px;
		display: flex;
		font-weight: bold;
		justify-content: center;
		align-items: center;
	}
}


/*=============================
.btn-trigger
=============================*/
.btn-trigger {
	position: relative;
	width: 30px;
	height: 18px;
	cursor: pointer;
}

.btn-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #6c757d;
	border-radius: 4px;
}

.btn-trigger,
.btn-trigger span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
}

.btn-trigger span:nth-of-type(1) {
	top: 0;
}

.btn-trigger span:nth-of-type(2) {
	top: 10px;
}

.btn-trigger span:nth-of-type(3) {
	bottom: -6px;
}

/*=============================
#hamburger-button
=============================*/
@media screen and (min-width:1025px) {
	.hamburger-button-container {
		display: none;
	}
}

#hamburger-button.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
	top: -10px;
}

#hamburger-button.active span:nth-of-type(2) {
	left: 50%;
	opacity: 0;
	-webkit-animation: active-btn05-bar02 .6s forwards;
	animation: active-btn05-bar02 .6s forwards;
}

@-webkit-keyframes active-hamburger-button-bar02 {
	100% {
		height: 0;
	}
}

@keyframes active-hamburger-button-bar02 {
	100% {
		height: 0;
	}
}

#hamburger-button.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
	top: 30px;
}

/* ヘッダー 店舗運営 */

.pit-header-shopname {
	font-weight: bold;
	text-align: center;
	/* タグを可変長にする */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 50%;
	padding: 0 25px 0;
}

.pit-header-service-status {
	font-weight: bold;
	text-align: center;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0 25px 0;
	width: auto;
}

.center-bold-text {
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
}

/* ボタン */
.btn-subtitle {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	margin-left: 14px;
}

.btn-subtitle:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

/* parent-detail.html */

.parent-detail-tab-group {
	display: flex;
	/* justify-content: center; */
	align-items: flex-end;
	height: 50px;
	margin-bottom: 16px;
}

.parent-detail-tab {
	list-style: none;
	border: solid 1px #E2DDDD;
	border-bottom: 5px solid #E2DDDD;
	text-align: center;
	cursor: pointer;
	width: 140px;
	height: 100%;
	border-radius: 10px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.panel {
	display: none;
}

.parent-detail-tab.is-active {
	background-color: #FCB2A9;
	border: none;
	height: 46px;
}

.panel.is-show {
	display: block;
}

.btn-wrapper {
	display: flex;
	justify-content: center;
}

.btn-update {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 20px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	height: 40px;
	margin: 0 auto;
}

.btn-update:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

.btn-add {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
}

.btn-add:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}


.btn-delete,
.delete-trigger-btn {
	background-color: #FF7B7B;
	color: white;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	min-width: 70px;
}

.btn-delete:hover {
	text-decoration: none;
	color: inherit;
}

.btn-image {
	background-color: #4A90E2;
	color: white;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	min-width: 70px;
}

.btn-image i {
	font-size: 0.875em;
	margin-right: 3px;
}

.btn-image:hover {
	text-decoration: none;
	color: inherit;
	background-color: #357ABD;
}

.btn-edit {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	min-width: 70px;
}

.btn-edit:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

.btn-delete i {
	font-size: 0.875em;
	margin-right: 3px;
}

/* jsでも使用 名称変更注意 */
.delete-modal,
.unlink-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.delete-modal-content {
	margin: 20% auto;
	width: 500px;
	height: 240px;
	padding: 60px 32px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border: 3px solid red;
	border-radius: 10px;
	background-color: white;
}

.unlink-modal-content {
	margin: 20% auto;
	width: 540px;
	height: 240px;
	padding: 60px 32px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border: 3px solid red;
	border-radius: 10px;
	background-color: white;
}

.delete-modal-content p,
.unlink-modal-content p {
	color: red;
	font-size: 16px;
	text-align: center;
	margin-bottom: 84px;
}

.delete-modal-body,
.unlink-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
}

/* jsでも使用 名称変更注意 */
.delete-cancel-btn,
.unlink-cancel-btn {
	background-color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-right: 10px;
}

.delete-cancel-btn:hover,
.unlink-cancel-btn:hover {
	cursor: pointer;
}

/* jsでも使用 名称変更注意 */
.delete-confirm-btn,
.unlink-confirm-btn {
	background-color: red;
	color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
}

.button-text {
	font-size: 14px;
	font-weight: bold;
}

.delete-button-text {
	font-size: 14px;
	font-weight: bold;
	color: red;
	margin-top: 64px;
}





/* 否認解除ボタン */
.deny-cancel-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.deny-cancel-modal-content {
	margin: 20% auto;
	width: 500px;
	padding: 16px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.deny-cancel-modal-content p {
	font-size: 16px;
}

.deny-cancel-memo {
	width: 100%;
	height: 180px;
	margin-bottom: 16px;
}

.deny-cancel-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
}

/* jsでも使用 名称変更注意 */
.deny-cancel-btn {
	background-color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-right: 10px;
}

.deny-cancel-btn:hover {
	cursor: pointer;
}

/* jsでも使用 名称変更注意 */
.deny-cancel-confirm-btn {
	background-color: #2F79EE;
	color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
}


.btndeny-cancel {
	background-color: #E8E47D;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
}

.btndeny-cancel:hover {
	text-decoration: none;
	color: inherit;
}

#parent-deny-cancel-history tbody tr td:nth-child(4) {
	text-align: center;
}

#pit-deny-cancel-history tbody tr td:nth-child(4) {
	text-align: center;
}


.button-text {
	font-size: 14px;
	font-weight: bold;
}

.delete-button-text {
	font-size: 14px;
	font-weight: bold;
	color: red;
	margin-top: 64px;
}

.unlink-trigger-btn {
	background-color: #E38E2C;
	color: white;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
}

#non-approved-parent-list tbody tr td:nth-child(1),
#non-approved-parent-list tbody tr td:nth-child(3),
#non-approved-parent-list tbody tr td:nth-child(4) {
	text-align: center;
}

#non-approved-pit-list tbody tr td:nth-child(1),
#non-approved-pit-list tbody tr td:nth-child(4) {
	text-align: center;
}

/* 紹介の有無を変更するダイヤログ */

/* jsでも使用 名称変更注意 */
.referral-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.referral-modal-content {
	margin: 20% auto;
	width: 500px;
	padding: 16px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.referral-modal-content p {
	font-size: 16px;
}

.referral-memo {
	width: 100%;
	height: 180px;
	margin-bottom: 16px;
}

.referral-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
}

/* jsでも使用 名称変更注意 */
.referral-cancel-btn {
	background-color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-right: 10px;
}

.referral-cancel-btn:hover {
	cursor: pointer;
}

/* jsでも使用 名称変更注意 */
.referral-confirm-btn {
	background-color: #2F79EE;
	color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
}

#parent-referral-history tbody tr td:nth-child(4) {
	text-align: center;
}

#pit-referral-history tbody tr td:nth-child(4) {
	text-align: center;
}

#pits-by-telephone tbody tr td:nth-child(1) {
	text-align: center;
}


/* 差し戻し用ダイヤログ */

.remand-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.remand-modal-content {
	margin: 20% auto;
	width: 500px;
	padding: 16px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.remand-modal-content p {
	font-size: 16px;
}

.remand-memo {
	width: 100%;
	height: 180px;
	margin-bottom: 16px;
}

.remand-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
}

/* jsでも使用 名称変更注意 */
.remand-cancel-btn {
	background-color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-right: 10px;
}

.remand-cancel-btn:hover {
	cursor: pointer;
}

/* jsでも使用 名称変更注意 */
.remand-confirm-btn {
	background-color: #2F79EE;
	color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
}

#parent-remand-history tbody tr td:nth-child(4) {
	text-align: center;
}

#pit-remand-history tbody tr td:nth-child(4) {
	text-align: center;
}

/* 否認用ダイヤログ */

.deny-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.deny-modal-content {
	margin: 20% auto;
	width: 500px;
	padding: 16px 32px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.deny-modal-content p {
	font-size: 16px;
}

.deny-memo {
	width: 100%;
	height: 180px;
	margin-bottom: 16px;
}

.deny-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
}

/* jsでも使用 名称変更注意 */
.deny-cancel-btn {
	background-color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-right: 10px;
}

.deny-cancel-btn:hover {
	cursor: pointer;
}

/* jsでも使用 名称変更注意 */
.deny-confirm-btn {
	background-color: #2F79EE;
	color: white;
	width: 100px;
	height: 40px;
	border: 1px solid #707070;
	border-radius: 4px;
	font-weight: bold;
}


.btn-deny {
	background-color: #FF7B7B;
	color: white;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
}

.btn-deny:hover {
	text-decoration: none;
	color: inherit;
}

#parent-deny-history tbody tr td:nth-child(4) {
	text-align: center;
}

#pit-deny-history tbody tr td:nth-child(4) {
	text-align: center;
}


/* 紐付け用ダイヤログ */

/* jsでも使用 名称変更注意 */
.link-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.link-modal-content {
	margin: 10vh 10% 0;
	width: 80%;
	padding: 64px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.link-modal-content p {
	font-size: 16px;
	margin-bottom: 32px;
}

.link-email-input,
.link-telephone-input {
	margin-bottom: 16px;
	width: 50%;
	height: 36px;
	border-radius: 4px;
	border-width: 1px;
}

.link-memo {
	width: 100%;
	height: 180px;
	margin-bottom: 16px;
}

.link-email-modal-body,
.link-telephone-modal-body {
	display: flex;
	justify-content: flex-end;
	font-size: 16px;
	padding: 0;
	margin-top: 16px;
}

/* jsでも使用 名称変更注意 */
.link-cancel-btn {
	background-color: white;
	width: 80px;
	height: 50px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-left: auto;
}

.link-cancel-btn:hover {
	cursor: pointer;
}

.search-wrapper {
	display: flex;
}

/* 新規登録ダイヤログ */

/* jsでも使用 名称変更注意 */
.regist-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.regist-modal-content {
	margin: 10vh 10% 0;
	width: 80%;
	padding: 64px;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	border-radius: 10px;
	background-color: white;
}

.regist-modal-content p {
	margin-bottom: 32px;
}

.regist-email-input {
	width: 100%;
	height: 36px;
	border-radius: 4px;
	border-width: 1px;
}

.regist-btn-container {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	height: 38px;
	margin-top: 32px;
}

.regist-cancel-btn {
	background-color: white;
	width: 80px;
	border: 1px solid #707070;
	border-radius: 4px;
}

.regist-confirm-btn {
	background-color: white;
	width: 180px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-left: 8px;
}

/* jsでも使用 名称変更注意 */
.link-email-search-btn,
.link-telephone-search-btn {
	background-color: white;
	width: 80px;
	height: 36px;
	border: 1px solid #707070;
	border-radius: 4px;
	margin-left: 8px;
}

.link-email-confirm-btn,
.link-telephone-confirm-btn {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 20px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 50%;
	height: 40px;
	margin: 0 auto;
}

.link-email-confirm-btn:hover,
.link-telephone-confirm-btn:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

/* parent > pit.html */

.pit-link-tab-group {
	display: flex;
	/* justify-content: center; */
	align-items: flex-end;
	height: 50px;
	margin-bottom: 16px;
}

.pit-link-tab {
	list-style: none;
	border: solid 1px #E2DDDD;
	border-bottom: 5px solid #E2DDDD;
	text-align: center;
	cursor: pointer;
	width: 140px;
	height: 100%;
	border-radius: 10px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pit-link-tab.is-active {
	background-color: #FCB2A9;
	border: none;
	height: 46px;
}

.email-table-wrapper,
.telephone-table-wrapper {
	display: none;
}

.btn-green {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 5px;
	font-size: 14px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 28px;
	padding: 0 10px;
}

@media screen and (max-width:1024px) {
	.btn-green {
		font-size: 12px;
	}
}

.btn-green:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
	cursor: pointer;
}

.btn-green i {
	font-size: 0.75em;
	margin-right: 4px;
}

/* 商品新規登録画面のボタンエリア */
.item-form-button-area {
	margin-bottom: 0;
}

.btn-type-edit,
.btn-type-update {
	height: 38px;
}

.btn-csv-output {
	margin-left: 8px;
}

.parent-discount-tab-group {
	display: flex;
	/* justify-content: center; */
	align-items: flex-end;
	height: 50px;
	margin-bottom: 16px;
}

.parent-discount-tab {
	list-style: none;
	border: solid 1px #E2DDDD;
	border-bottom: 5px solid #E2DDDD;
	text-align: center;
	cursor: pointer;
	width: 180px;
	height: 100%;
	border-radius: 10px;
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.parent-discount-tab.is-active {
	background-color: #FCB2A9;
	border: none;
	height: 46px;
}

.add-discount-navigation {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 16px;
}

.add-discount-navigation>div:first-child {
	margin-bottom: 8px;
}

.btn-green-w25 {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 20px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 25%;
	height: 40px;
	margin: 0 auto;
}

.btn-green-w25:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

.btn-green-rounded {
	background-color: #84EF84;
	color: #707070;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 20px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	height: 40px;
	margin: 0 auto;
}

.btn-green-rounded:hover {
	text-decoration: none;
	color: inherit;
	background-color: #39C339;
}

.btn-delete-w25 {
	background-color: #FF7B7B;
	color: white;
	border: 1px solid #707070;
	border-bottom: 3px solid #707070;
	border-radius: 20px;
	font-size: 14px;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	width: 25%;
	height: 40px;
	margin: 0 auto;
}

.btn-delete-w25:hover {
	text-decoration: none;
	color: inherit;
}

.sidebar ul {
	padding-left: 40px;
}

.blank-image {
	width: 150px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.paging-btn {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.5em 1em;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	color: #333 !important;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 2px;
	outline: none !important;
}

.paging-btn:hover {
	background: linear-gradient(to bottom, #585858 0%, #111 100%);
	color: #fff !important;
}

.fee-link {
	cursor: pointer;
}

/* 仮登録メールの説明 */
.image-container {
	height: 450px;
	overflow-y: auto;
}

/* メニューモーダルについて */
.menu-modal {
	display: none;
	position: fixed;
	top: 70px;
	left: 60%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1280px;
	background-color: #000000;
	z-index: 1000;
	color: #FFFFFF;
	height: 250px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

.menu-modal.is-show {
	display: block;
}

.menu-modal-content {
	width: 100%;
	height: 100%;
	padding: 20px;
	overflow-y: auto;
}

.fas {
	font-size: x-large;
}

/* 検索結果のレイアウト：左側に店舗情報、右側に地図 */
.search-results-container {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.shop-list-container {
	flex: 2;
	min-width: 0;
}

.map-container {
	flex: 1;
	min-width: 0;
	max-width: 500px;
}

.map-wrapper {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin: 0 0 15px 0;
	padding: 0;
}

.map-container .gmap {
	height: 540px;
	padding-bottom: 0;
}

.search-controls {
	margin-bottom: 20px;
}

#display-after-search {
	display: none;
	flex-direction: column;
	align-items: stretch;
}

/* カレンダーセクション */
.calendar-wrapper {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.calendar-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin: 0 0 20px 0;
	padding: 0;
}

.calendar-container {
	margin-bottom: 20px;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.calendar-nav-btn {
	background: none;
	border: none;
	font-size: 18px;
	color: #666;
	cursor: pointer;
	padding: 5px 10px;
	transition: color 0.2s;
}

.calendar-nav-btn:hover {
	color: #333;
}

.calendar-month-year {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0;
}

.calendar-grid {
	width: 100%;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	margin-bottom: 10px;
}

.calendar-weekday {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 8px 0;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.calendar-day {
	text-align: center;
	padding: 10px 5px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.calendar-day:hover {
	background-color: #f0f0f0;
}

.calendar-day.other-month {
	color: #ccc;
}

.calendar-day.sunday {
	color: #ff0000;
}

.calendar-day.saturday {
	color: #0066cc;
}

.calendar-day.selected {
	background-color: #0066cc;
	color: #ffffff;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

/* 空き状況セクション */
.availability-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.availability-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin: 0 0 15px 0;
}

.availability-list {
	display: flex;
	flex-direction: row;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
}

.availability-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 4px;
	flex: 0 0 auto;
	min-width: 140px;
}

.availability-shop-name {
	font-size: 14px;
	color: #333;
	margin-bottom: 5px;
}

.availability-count {
	font-size: 14px;
	font-weight: bold;
	color: #0066cc;
}

/* レスポンシブ対応：モバイルでは縦並びに戻す */
@media screen and (max-width: 768px) {
	.search-results-container {
		flex-direction: column;
	}

	.shop-list-container,
	.map-container {
		width: 100%;
	}
}

/* bootstrap-datetimepickerのデザイン修正 */
.bootstrap-datetimepicker-widget {
	z-index: 9999 !important;
	position: absolute !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	display: block !important;
	margin: 2px 0 !important;
	padding: 4px !important;
	width: 19em !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.bootstrap-datetimepicker-widget table {
	width: 100% !important;
	margin: 0 !important;
}

.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
	padding: 8px !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.bootstrap-datetimepicker-widget table th.dow {
	font-weight: bold !important;
}

.bootstrap-datetimepicker-widget table td.day {
	cursor: pointer !important;
}

.bootstrap-datetimepicker-widget table td.day:hover {
	background-color: #f5f5f5 !important;
}

/* DataTables テーブルの横幅設定 */
table.dataTable,
table.dataTable th,
table.dataTable td {
	box-sizing: content-box;
}

/* DataTables 子行内のバリエーションテーブルの横幅設定 */
table.dataTable tbody tr.child td {
	padding: 0 !important;
}

.child table.table,
.child table.table th,
.child table.table td {
	box-sizing: content-box;
	width: 100%;
}

.dataTables_length select {
	width: 100px;
}

/* DataTables 展開ボタンと行のスタイル */
.btn-expand {
	background-color: #FFB6C1;
	color: #707070;
	border: 1px solid #707070;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	cursor: pointer;
}

.btn-expand:hover {
	background-color: #FF91A4;
}

.btn-expand i {
	font-size: 0.875em;
}

.dt-control {
	text-align: center;
	cursor: pointer;
}

table.dataTable tbody tr.shown {
	background-color: #f8f9fa;
}

/* 商品情報テーブルのセル間の縦ボーダーを非表示 */
/* 最初のセル以外の左側の縦ボーダーを非表示 */
#item-list th:not(:first-child),
#item-list td:not(:first-child) {
	border-left: none !important;
}

/* 最後のセル以外の右側の縦ボーダーを非表示 */
#item-list>thead>tr>th:not(:last-child),
#item-list>tbody>tr:not(.variation-child-row)>td:not(:last-child) {
	border-right: none !important;
}

/* 販売価格/リードタイムテーブルのセル間の縦ボーダーを非表示 */
/* 最初のセル以外の左側の縦ボーダーを非表示 */
#price-leadtime-list th:not(:first-child),
#price-leadtime-list td:not(:first-child) {
	border-left: none !important;
}

/* 最後のセル以外の右側の縦ボーダーを非表示 */
#price-leadtime-list>thead>tr>th:not(:last-child),
#price-leadtime-list>tbody>tr>td:not(:last-child) {
	border-right: none !important;
}

/* 販売価格/リードタイムテーブルのカラム幅調整 */
/* バリエーションカラム（1列目）を拡大 */
#price-leadtime-list th:nth-child(1),
#price-leadtime-list td:nth-child(1) {
	width: 35% !important;
	min-width: 250px;
}

/* 販売価格管理モーダルの使用中バッジ */
.price-active-badge {
	background-color: #dff9e7;
	color: #1f6b3b;
	font-size: 0.7rem;
	font-weight: 300;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
}

/* 販売価格管理モーダルの保存ボタン */
.price-modal-save-btn {
	height: 38px;
	padding: 0.375rem 0.75rem;
	margin-left: 16px !important;
}

/* 必須バッジの文字を軽くする */
.required-badge-thin {
	font-size: 0.6rem;
	font-weight: 400;
	padding: 0.4rem 0.6rem;
	border-radius: 50px;
}

/* 販売価格管理モーダルのキャンセルボタン */
.price-modal-cancel-btn {
	background-color: #FFFFFF;
	color: #707070;
	margin-right: 16px !important;
}

/* 現在の選択中の販売価格カラム（2列目）を縮小 */
#price-leadtime-list th:nth-child(2),
#price-leadtime-list td:nth-child(2) {
	width: 30% !important;
	min-width: 200px;
}

/* 在庫数カラム（3列目）を拡大 */
#price-leadtime-list th:nth-child(3),
#price-leadtime-list td:nth-child(3) {
	width: 15% !important;
	min-width: 150px;
	text-align: center !important;
}

/* 現在のリードタイムカラム（4列目）を拡大 */
#price-leadtime-list th:nth-child(4),
#price-leadtime-list td:nth-child(4) {
	width: 20% !important;
	min-width: 200px;
	text-align: center !important;
}

/* 販売価格/リードタイムテーブルのセル内コンテンツを垂直方向中央揃え */
#price-leadtime-list td {
	vertical-align: middle !important;
}

/* ボタンを含むセル内のコンテナの高さを統一（バリエーションカラムは除外） */
#price-leadtime-list td:nth-child(2)>div,
#price-leadtime-list td:nth-child(3)>div,
#price-leadtime-list td:nth-child(4)>div {
	display: flex;
	align-items: center;
	min-height: 60px;
		/* 最小高さを設定して統一 */
}

/* 在庫数とリードタイムの列のコンテンツを中央寄せ */
#price-leadtime-list td:nth-child(3)>div,
#price-leadtime-list td:nth-child(4)>div {
	justify-content: center;
}

/* 在庫数とリードタイムの列のボタンを右側に配置 */
#price-leadtime-list td:nth-child(3)>div>button,
#price-leadtime-list td:nth-child(4)>div>button {
	margin-left: auto;
}

@media screen and (max-width: 768px) {
	#price-leadtime-list_wrapper .dataTables_length,
	#price-leadtime-list_wrapper .dataTables_filter {
		float: none;
		width: 100%;
		text-align: left;
	}

	#price-leadtime-list_wrapper .dataTables_filter {
		margin-top: 8px;
	}

	#price-leadtime-list_wrapper .dataTables_filter label {
		display: block;
		margin-bottom: 0;
	}

	#price-leadtime-list_wrapper .dataTables_filter input {
		width: 180px !important;
		max-width: 100%;
		margin-left: 0 !important;
		margin-top: 4px;
	}
}

/* バリエーションテーブルの背景色を薄い緑色に設定（ヘッダーは除く） */
.variation-child-row table {
	background-color: #f0f8f0 !important;
}

.variation-child-row table td {
	background-color: #f0f8f0 !important;
}

/* バリエーションテーブルのセル間の縦ボーダーを非表示 */
/* 最初のセル以外の左側の縦ボーダーを非表示 */
.variation-child-row table th:not(:first-child),
.variation-child-row table td:not(:first-child) {
	border-left: none !important;
}

/* 最後のセル以外の右側の縦ボーダーを非表示 */
.variation-child-row table th:not(:last-child),
.variation-child-row table td:not(:last-child) {
	border-right: none !important;
}

/* バリエーションテーブルのカラム幅（リードタイム・在庫数） */
.variation-child-row table th:nth-child(10),
.variation-child-row table td:nth-child(10) {
	width: 100px !important;
	min-width: 100px;
	max-width: 100px;
	white-space: nowrap;
}

.variation-child-row table th:nth-child(11),
.variation-child-row table td:nth-child(11) {
	width: 80px !important;
	min-width: 80px;
	max-width: 80px;
	white-space: nowrap;
}

/* 商品情報テーブル（親テーブル）のカラム幅設定 */
/* バリエーションテーブルには適用されないように、直接の子要素のみを対象とする */
/* 商品IDカラムの幅を固定 */
#item-list>thead>tr>th:nth-child(1),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(1) {
	width: 80px !important;
	min-width: 80px;
	max-width: 80px;
}

/* 商品種別カラムの幅を固定（均等幅） */
#item-list>thead>tr>th:nth-child(2),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(2) {
	width: 140px !important;
	min-width: 140px;
}

/* メーカーカラムの幅を固定（均等幅） */
#item-list>thead>tr>th:nth-child(3),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(3) {
	width: 140px !important;
	min-width: 140px;
}

/* モデルカラムの幅を固定（均等幅） */
#item-list>thead>tr>th:nth-child(4),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(4) {
	width: 140px !important;
	min-width: 140px;
}

/* 商品名カラムの幅を固定 */
#item-list>thead>tr>th:nth-child(5),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(5) {
	width: 200px !important;
	min-width: 200px;
}

/* 商品情報カラムの幅を固定 */
#item-list>thead>tr>th:nth-child(6),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(6) {
	width: 250px !important;
	min-width: 250px;
}

/* 操作ボタンカラムの幅を可変（ウィンドウの横幅に合わせて可変） */
/* 予約一覧画面の予約番号カラムと同様に、widthを設定せずmin-widthのみで可変にする */
#item-list>thead>tr>th:nth-child(7),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(7) {
	min-width: 220px;
}

/* 展開ボタンカラムの幅を固定 */
#item-list>thead>tr>th:nth-child(8),
#item-list>tbody>tr:not(.variation-child-row)>td:nth-child(8) {
	width: 50px !important;
	min-width: 50px;
	max-width: 50px;
}

/* 統合履歴テーブルのセクションヘッダーの背景色を統一 */
#unifiedItemHistoryTable thead tr:first-child th {
	background-color: #e9ecef;
}

/* 統合履歴テーブルのカラム幅設定 */
#unifiedItemHistoryTable {
	width: 100%;
	min-width: 2000px;
	table-layout: fixed;
	font-size: 0.9em;
}

/* 統合履歴テーブルの行のpadding設定 */
#unifiedItemHistoryTable thead th,
#unifiedItemHistoryTable tbody td {
	padding: 6px !important;
}

/* 操作種別カラム（1列目） */
#unifiedItemHistoryTable thead tr:last-child th:nth-child(1),
#unifiedItemHistoryTable tbody td:nth-child(1) {
	width: 100px !important;
	min-width: 100px;
}

/* 商品情報カラム（2-7列目） */
#unifiedItemHistoryTable thead tr:last-child th:nth-child(2),
#unifiedItemHistoryTable tbody td:nth-child(2) {
	width: 80px !important;
	min-width: 80px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(3),
#unifiedItemHistoryTable tbody td:nth-child(3) {
	width: 100px !important;
	min-width: 100px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(4),
#unifiedItemHistoryTable tbody td:nth-child(4) {
	width: 120px !important;
	min-width: 120px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(5),
#unifiedItemHistoryTable tbody td:nth-child(5) {
	width: 120px !important;
	min-width: 120px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(6),
#unifiedItemHistoryTable tbody td:nth-child(6) {
	width: 150px !important;
	min-width: 150px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(7),
#unifiedItemHistoryTable tbody td:nth-child(7) {
	width: 200px !important;
	min-width: 200px;
}

/* バリエーション情報カラム（8-19列目） */
#unifiedItemHistoryTable thead tr:last-child th:nth-child(8),
#unifiedItemHistoryTable tbody td:nth-child(8) {
	width: 100px !important;
	min-width: 100px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(9),
#unifiedItemHistoryTable tbody td:nth-child(9) {
	width: 120px !important;
	min-width: 120px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(10),
#unifiedItemHistoryTable tbody td:nth-child(10) {
	width: 100px !important;
	min-width: 100px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(11),
#unifiedItemHistoryTable tbody td:nth-child(11) {
	width: 80px !important;
	min-width: 80px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(12),
#unifiedItemHistoryTable tbody td:nth-child(12) {
	width: 100px !important;
	min-width: 100px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(13),
#unifiedItemHistoryTable tbody td:nth-child(13) {
	width: 80px !important;
	min-width: 80px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(14),
#unifiedItemHistoryTable tbody td:nth-child(14) {
	width: 80px !important;
	min-width: 80px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(15),
#unifiedItemHistoryTable tbody td:nth-child(15) {
	width: 80px !important;
	min-width: 80px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(16),
#unifiedItemHistoryTable tbody td:nth-child(16) {
	width: 100px !important;
	min-width: 100px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(17),
#unifiedItemHistoryTable tbody td:nth-child(17) {
	width: 120px !important;
	min-width: 120px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(18),
#unifiedItemHistoryTable tbody td:nth-child(18) {
	width: 150px !important;
	min-width: 150px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(19),
#unifiedItemHistoryTable tbody td:nth-child(19) {
	width: 150px !important;
	min-width: 150px;
}

/* 登録/更新/削除カラム（20-25列目） */
#unifiedItemHistoryTable thead tr:last-child th:nth-child(20),
#unifiedItemHistoryTable tbody td:nth-child(20) {
	width: 140px !important;
	min-width: 140px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(21),
#unifiedItemHistoryTable tbody td:nth-child(21) {
	width: 250px !important;
	min-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(22),
#unifiedItemHistoryTable tbody td:nth-child(22) {
	width: 140px !important;
	min-width: 140px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(23),
#unifiedItemHistoryTable tbody td:nth-child(23) {
	width: 250px !important;
	min-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(24),
#unifiedItemHistoryTable tbody td:nth-child(24) {
	width: 140px !important;
	min-width: 140px;
}

#unifiedItemHistoryTable thead tr:last-child th:nth-child(25),
#unifiedItemHistoryTable tbody td:nth-child(25) {
	width: 250px !important;
	min-width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* バリエーションテーブル（子テーブル）のカラム幅設定 */
/* 商品詳細IDカラムの幅を縮小 */
.variation-child-row table th:nth-child(1),
.variation-child-row table td:nth-child(1) {
	width: 100px !important;
	min-width: 100px;
	max-width: 100px;
}

/* 速度記号カラムの幅を固定 */
.variation-child-row table th:nth-child(6),
.variation-child-row table td:nth-child(6) {
	width: 100px !important;
	min-width: 100px;
	max-width: 100px;
}

/* 操作カラムの幅を固定 */
.variation-child-row table th:nth-child(12),
.variation-child-row table td:nth-child(12) {
	width: 100px !important;
	min-width: 100px;
	max-width: 100px;
}

/* その他のカラムを均等に広げる（速度記号と操作を除く） */
.variation-child-row table th:nth-child(2),
.variation-child-row table td:nth-child(2),
.variation-child-row table th:nth-child(3),
.variation-child-row table td:nth-child(3),
.variation-child-row table th:nth-child(4),
.variation-child-row table td:nth-child(4),
.variation-child-row table th:nth-child(5),
.variation-child-row table td:nth-child(5),
.variation-child-row table th:nth-child(7),
.variation-child-row table td:nth-child(7),
.variation-child-row table th:nth-child(8),
.variation-child-row table td:nth-child(8),
.variation-child-row table th:nth-child(9),
.variation-child-row table td:nth-child(9) {
	width: auto !important;
	min-width: 120px;
}

/* 商品画像コンテナのスタイル */
.item-image-container {
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 10px;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f9fa;
	margin-bottom: 5px;
}

.item-image-container img.itemimage {
	border: 1px solid #dee2e6;
}

/* バリエーション入力エリアのスタイル */
.variation-item {
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 15px;
	background-color: #fff;
}

.variation-item .text-right {
	text-align: right;
}

/* バリエーション画像コンテナのスタイル */
.variation-image-container {
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 10px;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f9fa;
	margin-bottom: 5px;
}

.variation-image-container img.itemimage {
	border: 1px solid #dee2e6;
}

/* 販売価格管理モーダル内のform-rowの背景色 */
#priceFormModal .form-row {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 4px;
}

/* 販売価格管理モーダル内の料金形態カードのスタイル */
#priceFormList .card {
	margin-bottom: 0.5rem;
	height: 70px;
	overflow: hidden;
}

#priceFormList .card-body {
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	height: 100%;
}

#priceFormList .card-title,
#priceFormList h6 {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

#priceFormList .card-text,
#priceFormList p.text-muted {
	font-size: 0.8rem;
	margin-bottom: 0;
}

/* 料金形態カードの説明文の行数制限 */
#priceFormList .price-form-description {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.2;
}

/* 検索結果の件数表示 */
.search-result-count {
	font-size: 0.8rem;
	color: #707070;
	background-color: #fff5f5;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}

/* 販売価格/リードタイム履歴テーブルの横スクロール対応 */
#priceLeadTimeHistoryModal .table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#priceLeadTimeHistoryModal #priceLeadTimeHistoryTable {
	width: 100%;
	min-width: 1200px;
	table-layout: fixed;
	font-size: 0.9em;
}

/* 販売価格管理モーダルのタイトルを中央配置 */
#priceFormModal .modal-header {
	position: relative;
	justify-content: center;
	border-bottom: none;
}

#priceFormModal .modal-header .close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

#priceFormModal .price-form-card {
	height: auto;
	min-height: 60px;
	overflow: visible;
}

#priceFormModal .price-form-card-body {
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
}

#priceFormModal .price-card-main {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

#priceFormModal .price-card-left {
	flex: 1;
	min-width: 0;
	margin-right: 15px;
}

#priceFormModal .price-card-content {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

#priceFormModal .price-card-price-wrap {
	flex-shrink: 0;
}

#priceFormModal .price-card-price {
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

#priceFormModal .price-card-description {
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1;
}

#priceFormModal .price-card-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 5px;
}

#priceFormModal .price-card-select-btn {
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
}

#priceFormModal .price-card-icon-btn {
	background-color: #fff;
	color: #333;
	border: 1px solid #ccc;
	font-size: 0.85rem;
	padding: 0.15rem 0.35rem;
}

#priceFormModal .price-card-edit-icon {
	font-size: 0.85rem;
	color: #6c757d;
}

#priceFormModal .price-card-delete-icon {
	font-size: 0.85rem;
	color: #dc3545;
}

#priceFormModal .edit-price-input {
	width: 120px;
	font-size: 0.9rem;
	font-weight: 600;
}

#priceFormModal .edit-price-yen {
	margin-left: 4px;
	font-size: 0.9rem;
	font-weight: 600;
}

#priceFormModal .price-card-description-wrap {
	flex: 1;
	min-width: 0;
}

#priceFormModal .edit-description-input {
	font-size: 0.8rem;
}

#priceFormModal .price-card-cancel-btn {
	background-color: #fff;
	color: #333;
	border: 1px solid #ccc;
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
}

@media screen and (max-width: 768px) {
	#priceFormModal .modal-dialog {
		max-width: 95%;
		margin: 1rem auto;
	}

	#priceFormModal .modal-body {
		padding: 0.75rem;
	}

	#priceFormModal #currentActivePrice {
		padding: 10px 12px !important;
		align-items: flex-start !important;
	}

	#priceFormModal .price-form-card {
		min-height: 88px;
	}

	#priceFormModal .price-form-card-body {
		padding: 0.5rem 0.75rem;
		align-items: stretch;
	}

	#priceFormModal .price-card-main {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	#priceFormModal .price-card-left {
		margin-right: 0;
	}

	#priceFormModal .price-active-badge {
		position: static !important;
		transform: none !important;
		margin-bottom: 4px;
	}

	#priceFormModal .price-card-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding-left: 0 !important;
	}

	#priceFormModal .price-card-price {
		white-space: normal;
		line-height: 1.3;
	}

	#priceFormModal .price-card-description {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	#priceFormModal .price-card-actions {
		width: 100%;
		justify-content: flex-end;
	}

	#priceFormModal .edit-price-input {
		width: min(160px, 52vw);
	}

	#priceFormModal .edit-description-input {
		font-size: 0.85rem;
	}
}

/*---------------------------
	S3 受注と発注画面
-----------------------------*/
/* フィルターボタン */
.btn-filter {
	border: 1px solid #ccc;
	background-color: white;
	color: #333;
	padding: 8px 16px;
	margin-right: 8px;
	border-radius: 4px;
}

.btn-filter.active {
	background-color: #28a745;
	color: white;
	border-color: #28a745;
}

/* レスポンシブ対応：ウィンドウ幅が狭い時のフィルターボタン */
@media screen and (max-width: 768px) {
	.btn-filter {
		padding: 4px 8px;
		margin-right: 4px;
		font-size: 0.875rem;
	}
}

/* ステータスカード */
.status-card {
	border-left: 4px solid #ccc;
	margin-bottom: 10px;
}

.status-card .card-body {
	padding: 0.65rem;
}

.status-card h6 {
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.status-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0;
}

.status-card.status-new {
	border-left-color: #ffc107;
}

.status-card.status-ordering {
	border-left-color: #17a2b8;
}

.status-card.status-received {
	border-left-color: #28a745;
}

.status-card.status-completed {
	border-left-color: #6c757d;
}

/* レスポンシブ対応：ウィンドウ幅が狭い時のステータスカード */
@media screen and (max-width: 768px) {
	.status-card .card-body {
		padding: 0.5rem;
	}

	.status-card h6 {
		font-size: 0.75rem;
		margin-bottom: 0.25rem;
	}

	.status-card h3 {
		font-size: 1rem;
	}

	.order-status-row {
		margin-left: -4px;
		margin-right: -4px;
		display: flex;
		flex-wrap: wrap;
	}

	.order-status-col {
		padding-left: 4px;
		padding-right: 4px;
		margin-bottom: 8px;
	}

	.order-status-col.col-6 {
		flex: 0 0 auto;
		width: 50% !important;
		max-width: 50% !important;
	}
}

/* 発注モーダルの背景色と角丸 */
.item-order-modal-body {
	background-color: #f5f5f5;
	border-radius: 3rem;
	border: none !important;
}

/* 発注モーダルのヘッダーとフッターの線を消す */
.item-order-modal-header {
	border-bottom: none !important;
}

.item-order-modal-footer {
	border-top: none !important;
	justify-content: center;
}

.item-order-modal-footer .btn {
	margin: 0 20px;
}

/* 発注モーダルのキャンセルボタンの背景色を白に */
.item-order-modal-footer .item-order-modal-cancel-btn {
	background-color: white !important;
	color: #6c757d !important;
	border-color: #6c757d !important;
}

.item-order-modal-footer .item-order-modal-cancel-btn:hover {
	background-color: #f8f9fa !important;
}

/* 受け取りモーダルの完了ボタンの背景色を緑に */
.item-order-modal-footer .item-order-modal-receive-btn {
	background-color: #28a745 !important;
	border-color: #28a745 !important;
}

.item-order-modal-footer .item-order-modal-receive-btn:hover {
	background-color: #218838 !important;
	border-color: #1e7e34 !important;
}

/* 元に戻すモーダルのヘッダースタイル */
.item-order-modal-revert-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.item-order-modal-revert-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #007bff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	flex-shrink: 0;
}

.item-order-modal-revert-description {
	color: #17a2b8;
	font-size: 0.875rem;
}

/* 元に戻すボタンの背景色を青に */
.item-order-modal-footer .item-order-modal-revert-btn {
	background-color: #007bff !important;
	border-color: #007bff !important;
}

.item-order-modal-footer .item-order-modal-revert-btn:hover {
	background-color: #0056b3 !important;
	border-color: #0056b3 !important;
}

/* 発注取消モーダルのヘッダースタイル */
.item-order-modal-cancel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.item-order-modal-cancel-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ffc107;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	flex-shrink: 0;
}

.item-order-modal-cancel-description {
	color: #ff9800;
	font-size: 0.875rem;
}

/* 発注取消ボタンの背景色をオレンジに */
.item-order-modal-footer .item-order-modal-cancel-confirm-btn {
	background-color: #ff9800 !important;
	border-color: #ff9800 !important;
}

.item-order-modal-footer .item-order-modal-cancel-confirm-btn:hover {
	background-color: #e68900 !important;
	border-color: #e68900 !important;
}

/* 詳細モーダルのスタイル */
.item-order-detail-modal-body {
	background-color: #fff !important;
	padding: 1.0rem;
	border-radius: 0 !important;
}

/* 基本情報・商品情報セクションの背景色 */
.item-order-detail-section {
	background-color: #f5f5f5;
	border-radius: 1rem;
	padding: 1rem;
}

.item-order-detail-modal-body h6 {
	font-size: 1rem;
	font-weight: bold;
}

.item-order-detail-modal-body .text-muted.small {
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
}

.item-order-detail-modal-body p {
	margin-bottom: 0.5rem;
}

/* ステータス履歴のスタイル */
#detailOrderModalStatusHistory .item-order-history-row {
	position: relative;
	padding-bottom: 1rem;
	border-bottom: 1px solid #dee2e6;
}

#detailOrderModalStatusHistory .item-order-history-row:last-child {
	border-bottom: none;
}

/* 左端の縦線（タイムライン） */
#detailOrderModalStatusHistory .item-order-history-row:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 8px;
	width: 2px;
	height: calc(100% - 4px);
	background-color: #dee2e6;
}

/* 詳細モーダルのフッター */
.item-order-detail-modal-footer {
	border-top: none !important;
	justify-content: center;
}

/* 詳細モーダルの閉じるボタン（紫色） */
.item-order-detail-close-btn {
	background-color: #6f42c1 !important;
	border-color: #6f42c1 !important;
	color: white !important;
}

.item-order-detail-close-btn:hover {
	background-color: #5a32a3 !important;
	border-color: #5a32a3 !important;
	color: white !important;
}

/* 操作カラムの「元に戻す」ボタンの背景色を白、枠線を赤に */
.item-order-revert-btn {
	background-color: #ffffff !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
	margin-right: 10px;
}

.item-order-revert-btn:hover {
	background-color: #f8f9fa !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
}

/* 操作カラムの「発注取消」ボタンの背景色を白、枠線を赤に */
.item-order-cancel-btn {
	background-color: #ffffff !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
	margin-right: 10px;
}

.item-order-cancel-btn:hover {
	background-color: #f8f9fa !important;
	border-color: #dc3545 !important;
	color: #dc3545 !important;
}

/* 操作カラムの「詳細」ボタンの背景色を白に */
.item-order-detail-btn {
	background-color: #ffffff !important;
	border-color: #6c757d !important;
	color: #6c757d !important;
}

.item-order-detail-btn:hover {
	background-color: #f8f9fa !important;
	border-color: #6c757d !important;
	color: #6c757d !important;
}

/* 操作カラムのボタンアイコンのサイズを18×18に統一 */
.item-order-action-icon {
	width: 18px;
	height: 18px;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* レスポンシブ対応：ウィンドウ幅が狭い時のモーダルウィンドウ */
@media screen and (max-width: 768px) {

	/* モーダルダイアログの幅を調整 */
	#placeOrderModal .modal-dialog,
	#receiveOrderModal .modal-dialog,
	#revertOrderModal .modal-dialog,
	#cancelOrderModal .modal-dialog {
		max-width: 95%;
		margin: 1rem auto;
	}

	#detailOrderModal .modal-dialog {
		max-width: 95%;
		margin: 1rem auto;
	}

	/* モーダルヘッダーのタイトルサイズ調整 */
	.item-order-modal-header .modal-title {
		font-size: 1rem;
		line-height: 1.4;
	}

	/* 元に戻す・発注取消モーダルのヘッダーアイコンサイズ調整 */
	.item-order-modal-revert-icon,
	.item-order-modal-cancel-icon {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.item-order-modal-revert-header .ml-3,
	.item-order-modal-cancel-header .ml-3 {
		margin-left: 0.75rem !important;
	}

	.item-order-modal-revert-description,
	.item-order-modal-cancel-description {
		font-size: 0.75rem;
	}

	/* モーダルボディのパディング調整 */
	.item-order-modal-body {
		padding: 1rem 0.75rem;
	}

	.item-order-modal-body .form-group {
		margin-bottom: 0.75rem;
	}

	.item-order-modal-body label {
		font-size: 0.875rem;
	}

	.item-order-modal-body p {
		font-size: 0.875rem;
		margin-bottom: 0.25rem;
	}

	/* モーダルフッターのボタンサイズと間隔調整 */
	.item-order-modal-footer {
		flex-direction: column;
		padding: 0.75rem;
	}

	.item-order-modal-footer .btn {
		width: 100%;
		margin: 0.25rem 0 !important;
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	/* 詳細モーダルのスタイル調整 */
	.item-order-detail-modal-body {
		padding: 0.75rem;
	}

	.item-order-detail-section {
		padding: 0.75rem;
		margin-bottom: 1rem;
	}

	.item-order-detail-modal-body h6 {
		font-size: 0.875rem;
	}

	.item-order-detail-modal-body .text-muted.small {
		font-size: 0.7rem;
	}

	.item-order-detail-modal-body p {
		font-size: 0.875rem;
	}

	/* 詳細モーダルのフッターボタン */
	.item-order-detail-modal-footer {
		padding: 0.75rem;
	}

	.item-order-detail-modal-footer .btn {
		width: 100%;
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}
}

/* 予約一覧用：スマートフォン時は検索欄を枠内に収め、検索条件はその下の行に表示する */
@media screen and (max-width: 768px) {

	/* 検索エリア全体を枠内に収める */
	.reservation-list-search-area,
	#reservation-list-search-area {
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	.reservation-list-search-filter-section {
		max-width: 100%;
		box-sizing: border-box;
		padding: 8px !important;
	}

	.reservation-list-search-condition-header.row.mb-3 {
		margin-bottom: 10px !important;
	}

	.reservation-list-search-condition-header-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5em;
		min-width: 0;
	}

	.reservation-list-search-condition-header-left {
		order: 1;
		width: 100%;
		min-width: 0;
		gap: 6px;
	}

	.reservation-list-search-condition-header-right {
		order: 2;
		min-width: 0;
		flex-wrap: wrap;
	}

	.reservation-list-search-condition-header-left label {
		font-size: 13px;
	}

	.reservation-list-search-condition-label {
		font-size: 13px;
	}

	.reservation-list-search-condition-buttons .btn-green {
		padding: 6px 12px;
		font-size: 13px;
	}

	/* 検索条件の行（row）がはみ出さないように */
	#reservation-list-search-filter-section .row {
		margin-left: 0;
		margin-right: 0;
	}

	#reservation-list-search-filter-section .col-md-12,
	#reservation-list-search-filter-section .col-md-3 {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.reservation-list-item-filter-row .col-md-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.reservation-list-item-filter-row label,
	.reservation-list-item-filter-row .form-control {
		font-size: 13px;
	}

	.reservation-list-item-filter-row .form-control {
		padding: 6px 10px;
	}
}