html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.all-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 全体の高さを画面の高さに合わせる */
}

main {
    flex: 1; /* 余ったスペースをメインコンテンツで埋める */
}

footer {
    text-align: center;
    width: 100%;
}

.page-background{
	background-image: url('../images/background.png');
	background-repeat: repeat-y;
	background-size: contain;
}
.background-album{
	background-color: #fff4ca;
}
.background-white{
	background-color: #FFFFFF;
}
.background-table-orange{
	background-color: #ffd48c;
}
.background-image-upload{
	background-color: #FFEA96;
}

.orange-line {
    width: 100px;
    height: 10px;
    background-color: #F39800;
    margin: 20px;
	margin-top: 3.5%;
	position: absolute;
	border-radius: 5px;
}

/* 300px未満 */
@media (max-width: 299px) {
    .orange-line {
        margin-top: 15.0%;
    }
}

/* 300px以上500px未満 */
@media (min-width: 300px) and (max-width: 349px) {
    .orange-line {
        margin-top: 11.0%;
    }
}
@media (min-width: 350px) and (max-width: 499px) {
    .orange-line {
        margin-top: 9.0%;
    }
}

/* 500px以上700px未満 */
@media (min-width: 500px) and (max-width: 699px) {
    .orange-line {
        margin-top: 7.0%;
    }
}

/* 700px以上900px未満 */
@media (min-width: 700px) and (max-width: 899px) {
    .orange-line {
        margin-top: 5.5%;
    }
}

/* 900px以上1100px未満 */
@media (min-width: 900px) and (max-width: 1099px) {
    .orange-line {
        margin-top: 4.5%;
    }
}

/* 1100px以上1300px未満 */
@media (min-width: 1100px) and (max-width: 1299px) {
    .orange-line {
        margin-top: 4.0%;
    }
}

/* 1300px以上1500px未満 */
@media (min-width: 1300px) and (max-width: 1499px) {
    .orange-line {
        margin-top: 3.5%;
    }
}

/* 1500px以上1700px未満 */
@media (min-width: 1500px) and (max-width: 1699px) {
    .orange-line {
        margin-top: 3.0%;
    }
}

/* 1700px以上 */
@media (min-width: 1700px) {
    .orange-line {
        margin-top: 2.5%;
    }
}


.orange-text{
	color: #F39800;
}

.red-text{
	color: #ff0000;
}

.album-title{
	word-wrap: break-word;
    max-width: 300px; /* 必要に応じて最大幅を調整 */
    white-space: normal;
}

.table-head-color{
	background-color: #FFEB97 !important;
	color: #727171;
	padding: 10px; /* 適度なパディングを追加 */
    margin: 0 5px; /* 両側に少しマージンを追加 */
	/*border: 1px solid #DDD;*/ /* 薄いボーダーを追加 */
    border-radius: 10px; /* 角を丸くする */
}
/*
.table thead th {
    background-color: #FFEB97 !important;
    color: #727171;
    padding: 10px;
    margin: 0 5px;
	*/
    /*border: 1px solid #DDD;*/
	/*
    border-radius: 10px;
}
*/

.top-table {
    border-collapse: separate;
    border-spacing: 5px; /* th要素の間にスペースを追加 */
}

.top-a-tag {
    display: inline-block;
    /*margin-right: 10px;*/ /* 画像間に少しスペースを追加 */
}

.last-td {
    margin-right: 0; /* 最後の画像の右側にはマージンを追加しない */
}

.smaller-text{
	font-size: 0.7rem;
}

.album-type img {
    display: inline-block;
    margin-right: 10px; /* 画像とテキストの間にマージンを追加 */
}

.table td, .table th {
    text-align: center; /* 水平方向の中央揃え */
    vertical-align: middle; /* 垂直方向の中央揃え */
}

.table-container {
    border: 1px solid #DDD; /* テーブル全体にボーダーを追加 */
    border-radius: 10px; /* テーブル全体の角を丸くする */
    padding: 10px; /* テーブル全体にパディングを追加 */
}

/* 表示デザインの画像を中央揃えにする */
.cover-thumb {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.inquiry-text{
	color: #595757;
}

/*
.album-type span {
    vertical-align: middle;
}
*/
/*
.smaller-text {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
}
*/

.submit-button {
	cursor: pointer;
}

.custom-list {
    list-style-type: none;
    padding-left: 0;
}

.custom-list li {
    position: relative;
    padding-left: 1.5em;
}

.custom-list li::before {
    content: "◆";
    position: absolute;
    left: 0;
    font-size: 0.9em;
    color: #000; /* 変更が必要な場合は色を設定 */
}

.deliv-small-text{
	font-size: 0.75em;
	color: #F39800
}

.points-note {
    border: 2px solid orange; /* オレンジ色の線で囲う */
    border-radius: 15px; /* 角を丸くする */
    padding: 20px; /* 内側の余白を設定 */
}
.points-note-hs {
    border: 2px solid orange; /* オレンジ色の線で囲う */
    border-radius: 15px; /* 角を丸くする */
    padding: 0px; /* 内側の余白を設定 */
}
.points-note-gih {
    border: 2px solid gray; /* オレンジ色の線で囲う */
    border-radius: 15px; /* 角を丸くする */
    padding: 0px; /* 内側の余白を設定 */
}
.points-note-order {
    border: 2px solid orange; /* オレンジ色の線で囲う */
    border-radius: 15px; /* 角を丸くする */
    padding: 0px; /* 内側の余白を設定 */
}

.background-order{
	background-color: #FFEA96;
	
}

.rotate-90 {
    transform: rotate(90deg);
}

.align-middle {
	vertical-align: middle !important;
}

.fm-tab .nav-link {
	color: #FFFFFF;
	background-color: #F39800;
	border-color: transparent;
	margin-right: 2px;
}
.fm-tab .nav-link.active {
	color: #F39800;
	background-color: #FFFFFF;
	border-color: #F39800;
}
.fm-tab .nav-link:hover {
	color: #FFFFFF;;
	background-color: rgba(243, 152, 0, 0.8);
	border-color: rgba(243, 152, 0, 0.8);
}

.sc-tab .nav-link {
	color: #888888;
	background-color: #DBDCDC;
	border-color: transparent;
	margin-right: 2px;
}
.sc-tab .nav-link.active {
	color: #FFFFFF;
	background-color: #F39800;
	border-color: #F39800;
}
.sc-tab .nav-link:hover {
	color: #F39800;
	background-color: #FFFFFF;
	border-color: #F39800;
}

.bg-new_album{
	background-color: #FFEA96;
	border-radius: 20px; /* 角を丸くする */
	padding: 20px; /* パディングを追加して背景色を内側に縮める */
}

.btn-outline-orange {
    color: #F39800;
    border: 1px solid #F39800;
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-orange:hover {
    color: #fff;
    background-color: #F39800;
    border-color: #F39800;
}

.btn-outline-orange:focus, .btn-outline-orange.focus {
    box-shadow: 0 0 0 0.2rem rgba(243, 152, 0, 0.5);
}

.btn-outline-orange:active, .btn-outline-orange.active,
.show > .btn-outline-orange.dropdown-toggle {
    color: #fff;
    background-color: #e08900;
    border-color: #e08900;
}

.btn-outline-orange:active:focus, .btn-outline-orange.active:focus,
.show > .btn-outline-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(243, 152, 0, 0.5);
}

.btn-outline-orange:disabled, .btn-outline-orange.disabled {
    color: #F39800;
    background-color: transparent;
}

.btn-orange {
    color: #fff;
    background-color: #F39800;
    border-color: #F39800;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-orange:hover {
    color: #fff;
    background-color: #e08900;
    border-color: #e08900;
}

.btn-orange:focus, .btn-orange.focus {
    color: #fff;
    background-color: #e08900;
    border-color: #e08900;
    box-shadow: 0 0 0 0.2rem rgba(243, 152, 0, 0.5);
}

.btn-orange:active, .btn-orange.active,
.show > .btn-orange.dropdown-toggle {
    color: #fff;
    background-color: #d77a00;
    border-color: #d77a00;
}

.btn-orange:active:focus, .btn-orange.active:focus,
.show > .btn-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(243, 152, 0, 0.5);
}

.btn-orange:disabled, .btn-orange.disabled {
    color: #fff;
    background-color: #F39800;
    border-color: #F39800;
}


.bg-status_bar{
	background-color: #FFF6D2;
	border-radius: 5px; /* 角を丸くする */
	padding: 20px; /* パディングを追加して背景色を内側に縮める */
    border: 2px solid #F39800; /* 幅、スタイル、色を指定して境界線を追加 */
}

.bg-status_bar img {
    height: 100px; /* 画像の高さを固定 */
    width: auto; /* 幅を自動調整してアスペクト比を保持 */
}

.layout-select-border{
	background-color: #FFFFFF;
	border-radius: 5px; /* 角を丸くする */
	/* padding: 20px; */ /* パディングを追加して背景色を内側に縮める */
    border: 2px solid #C8C9C9; /* 幅、スタイル、色を指定して境界線を追加 */
}

.btn-gray {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}

.btn-gray:hover {
	color: #fff;
	background-color: #5a6268;
	border-color: #545b62;
}

.btn-gray:focus, .btn-gray.focus {
	box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-gray:not(:disabled):not(.disabled):active, 
.btn-gray:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #545b62;
	border-color: #4e555b;
}