/*
メインのトップページのＣＳＳです。
*/

.page-container {
	max-width: 1124px;
	margin: auto;
}

.main-showroom {
	padding: 0;
}
.pr-0 {
	padding-right: 0px !important;
}
.pl-0 {
	padding-left: 0px !important;
}
#page {
	margin:0 auto 1em auto;
	background-color: var(--default-bg-color);
	color: var(--default-txt-color);
	border: 1px solid var(--default-border-color);
}

.main-showroom #main {
	padding: 0 50px;
	overflow: hidden;
}

body:not(.login) #page {
	border-top: none;
}

.screen-disabled {
	opacity: 0.6;
	user-select: none;
}

/* header */
.header {
    z-index: 9;
}
.header .ml-50 {
	margin-left: 50px;
}
.header .logo {
	margin-left: 60px;
}
.header .btn-right {
	margin-right: 60px;
}
.header .mr-50 {
	margin-right: 50px;
}
.header .container {
    max-width: 100%;
}

.header a img,
.auth-logo img {
    height: 40px;
    /* width: 40px; */
}
.header .color-white {
	color: var(--default-bg-color);
}
.header .color-white:hover {
	color: var(--default-bg-color) !important;
	opacity: 1 !important;
}
/* end header */

/* footer */
.footer {
    text-align: center;
}
.footer .link a{
	margin-right: 30px;
	text-decoration: none;
	color: black;
}
footer {
    border-top: #aea8a8 solid 1px;
    background-color: #ffffff !important;
	margin: var(--default-spacing) !important;
	padding: 0px !important;
}
.footer .link {
	margin-top: 15px;
}

/* end footer */

/* === メインページのメッセージ >>> */
.main-message {
	margin-left: calc(var(--default-spacing)*-1);
	margin-right: calc(var(--default-spacing)*-1);
	display: flex;
	background-color: var(--accent-bg-color);
	color: var(--accent-txt-color);
}

.main-message .message-text {
	flex: 1;
	align-self: center;
	padding: 20px;
	font-size: 16px;
}

.main-message .message-img {
	flex: content;
	padding: var(--default-spacing);
}
.main-cover {
	margin-left: calc(var(--default-spacing)*-1);
	margin-right: calc(var(--default-spacing)*-1);
	display: flex;
	background-image: url('../resources/defaults/beach.png');
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--accent-txt-color);
	position: relative;
	height: 450px;
}

.main-cover .cover-text {
	flex: 1;
	padding: 20px;
	font-size: 16px;
	background-color: #0000009e;
}
.main-cover .cover-text h5{
	text-align: left;
	font: normal normal normal 26px/57px Kozuka Gothic Pro;
	letter-spacing: 0px;
	color: var(--default-bg-color);
	opacity: 1;
}
.main-cover .cover-text p{
	text-align: left;
	font: normal normal normal 16px/30px Kozuka Gothic Pro;
	letter-spacing: 0px;
	color: var(--default-border-color);
	opacity: 1;
}

.main-cover .wrap-content {
	display: flex;
	align-items: flex-end;
	/* padding: 0 50px; */
	background: rgb(0 0 0 / 40%);
	width: 100%;
}
/* session maker */
section.maker, section.map {
	background-color: var(--default-table-bg);
	display: flex;
	flex-direction: column;
}
section.showroom-search, section.maker, section.map {
	display: flex;
	flex-direction: column;
}
section.maker a, section.map a, section.showroom-search a{
	text-decoration: none;
	width: fit-content;
    margin: 0 auto;
}
section.showroom-search form {
	margin-top: 20px;
}

section.showroom-search form .col-md-6{
	margin-bottom: 10px;
}

section.maker .wrap-image{
	width: 130px;
	height: 130px;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 1px solid var(--border-admin-section);
	margin: 23px auto;
}
section.maker .wrap-image a{
	height: 100%;
	width: 100%;
	display: flex;
    align-items: center;
	justify-content: center;
}

section.maker .wrap-item {
    overflow-x: scroll;
	padding: 0 20px;
}
.wrap-map-mobile {
	display: none;
}
/* width */
section.maker .wrap-item::-webkit-scrollbar {
    height: 5px;
    border-radius: 8px;
}

/* Track */
section.maker .wrap-item::-webkit-scrollbar-track {
    background: var(--default-table-bg);
}

/* Handle */
section.maker .wrap-item::-webkit-scrollbar-thumb {
    background: var(--default-border-color);
    opacity: 0.9;
    border-radius: 8px;
}

/* Handle on hover */
section.maker .wrap-item::-webkit-scrollbar-thumb:hover {
    background: var(--default-border-color);
    opacity: 1;
}
section span.label-section{
	text-align: center;
	font-size: 40px;
	line-height: 88px;
	letter-spacing: 0px;
	color: var(--default-txt-color);
	opacity: 1;
	width: fit-content;
	margin: 0 auto;
}
section span.text-guide{
	text-align: center;
	font-size: 20px;
	line-height: 44px;
	letter-spacing: 0px;
	color: var(--default-txt-color);
	opacity: 1;
	width: fit-content;
	margin: 0 auto;
}
section.showroom-search span.text-guide{
	margin-bottom: 20px;
}
.showroom-search .range span.divider {
    min-width: 35px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.showroom-search .range{
	display: flex;
	margin-bottom: 20px;
}

.showroom-search label{
    width: 162px;
	margin-right: 16px;
	text-align: left;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0px;
	color: var(--default-txt-color);
	opacity: 1;
}
.showroom-search input[name='keywords'] {
	width: calc(100% - 182px);
}
.showroom-search input{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 3px solid #D2D2D2;
	border-radius: 12px;
	opacity: 1;
	width: 143px;
	height: 40px;
	text-indent: 6px;
}
.showroom-search .range input:not(input[name='type_length']):focus-visible {
	outline: unset;
}

.showroom-search .wrap-range {
    display: flex;
    flex-wrap: wrap;
}

.showroom-search .range .d-flex.flex-column,
.rear-grip .d-flex.flex-column {
    max-width: 350px;
}
.showroom-search {
	max-width: 500px;
	margin: 0 auto;
}
.showroom-search select, .map select{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 3px solid var(--default-border-color);
	border-radius: 12px;
	opacity: 1;
	width: 236px;
}
.map select{
	width: 100%;
}
.main-cover .cover-img iframe {
	width: 575px;
	height: 385px;
	/* background: transparent url('img/kakou2.png') 0% 0% no-repeat padding-box; */
	/* box-shadow: 0px 3px 6px #00000052; */
	margin-bottom: -30px;
	object-fit: cover;
}
.wp{
	white-space: nowrap;
}
.showroom h3{
	margin: 0 auto;
	width: fit-content;
}

.main-showroom input, .main-showroom select{
	height: 37px;
	text-indent: 6px;
}
.showroom .list-title-jp{
	font-size: 30px;
	line-height: 66px;
	font-weight: bold;
}
.showroom input,
.showroom select,
.showroom .wrap-list .search input,
.showroom .wrap-list .search select {
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 1px solid var(--default-border-color);
	text-indent: 6px;
}
.showroom .wrap-list .search .wrap-range input{
	width: calc((100% - 1.5rem - 6px)/2);
}
.showroom .wrap-list .search .range .divider{
	width: 30px;
	text-align: center;
}

.showroom .wrap-list .search .wrap-range.range-ft {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
}
.showroom .wrap-list .search .wrap-range.range-ft>* {
	flex: 0 1 50%;
}
.showroom .wrap-list .search .wrap-range.range-ft>.divider {
	flex-basis: 75%;
}

.showroom .wrap-list .search .wrap-range.range-ft input {
	min-width: 3em;
	max-width: 6em;
	margin-bottom: 3px;
}

.showroom .wrap-list .search .wrap-button{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.showroom .wrap-list .search form{
	display: flex;
	flex-direction: column;
}
.showroom .wrap-list .search form button{
	width: 110px;
}
.showroom .list-title-en{
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	border-bottom: 5px solid #64A1DE;
}
.showroom .maker-list .maker-logo img {
    border: 1px solid var(--border-admin-section);
    width: 185px;
    min-width: 185px;
    height: 123px;
    object-fit: contain;
	margin-right: 20px;
}
.showroom .link-black .wrap-item {
    box-shadow: 1px 1px 4px #00000029;
}
.showroom .link-black .wrap-item .wh-32{
    margin: 5px 8px;
}
.showroom .link-black .wrap-item .col-sm-8{
	margin-left: 8px;
	margin-bottom: 8px;
}
.btn-category, .btn-compare{
	background: #E2EBFF 0% 0% no-repeat padding-box;
	font-size: 16px;
	line-height: 25px;
	border: none;
    border-radius: 5px;
    padding: 2px 10px;
	margin-right: 8px;
	margin-bottom: 10px;
}
.btn-compare {
	background: var(--secondary)!important;
}
.showroom .maker-list table {
    border-collapse: separate;
    border-spacing: 0 30px;
}
h4.title-top {
    font-family: Kozuka B;
	font-weight: bold;
	font-size: 25px;
	line-height: 30px;
	text-align: center;
    border-left: none;
}
.user-breadcrums {
	background-color: #D7DAE1;
}
.user-breadcrums .breadcrum-title {
	font-family: var(--bs-font-sans-serif) !important;
	margin-left: 50px;
	color: black;
	margin-bottom: 0px !important;
}
.user-breadcrums .breadcrums-link {
	flex-grow: 1;
	align-self: center;
	text-align: right;
	margin-right: 60px;
}
.user-breadcrums .breadcrums-link a{
	text-decoration: none;
	color: black;
}
.user-breadcrums .breadcrum-title .lever{
	font-size: 17px;
}
.user-breadcrums .breadcrum-title .link-right{
	float: right;
}
.user-breadcrums .breadcrum-title .link-right{
	margin-right: 60px;
}
.main-showroom .item-confirm .wrap-card .form-buttons button[type=button]:disabled {
	opacity: 0.8;
}
.main-showroom .item-add .item-confirm .img-cover {
    margin: 0 auto 20px;
}
.main-showroom .item-add .item-confirm .wrap-card .wrap-buttons {
	margin-top: 15px;
}
.btn-create:disabled{
	opacity: 0.7;
}

.maker-list-container {
	--lvl1-color: white;
	--lvl2-color: #eee;
	--lvl3-color: #ddd;
	--border-color: grey;
}

.maker-list-container nav {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}
.maker-list-container nav a {
	display: inline-block;
	margin-left: 10px;
	padding: 10px;
	border: 1px solid var(--border-color);
	border-bottom-color: transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-decoration: none;
	color: black;
}
.maker-list-container nav a.active {
	border-color: transparent;
}

.maker-list-container.lvl1 {
	background: var(--lvl1-color);
}
.maker-list-container.lvl2 {
	padding: 10px 0 0 0;
	background: var(--lvl2-color);
}
.maker-list-container.lvl3 {
	padding: 10px 10px 0 10px;
	background: var(--lvl3-color);
}

.maker-list-container.lvl1 nav a.active {
	background: var(--lvl2-color);
}
.maker-list-container.lvl2 nav a.active {
	background: var(--lvl3-color);
}

.maker-list-container .item {
	flex: 0 1 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 15px 15px 0;
	padding: 8px;
	border-radius: 5px;
	background-color: #eee;
}
.maker-list-container .item:last-child {
	margin-right: 0;
}

.maker-list-container .item .wrap-img {
	display: flex;
	justify-content: center;
}
.maker-list-container .item .wrap-content {
	margin-top: auto;
}

/* width */
.main-showroom .maker-item .wrap-tabs::-webkit-scrollbar {
    height: 5px;
    border-radius: 8px;
}

/* Track */
.main-showroom .maker-item .wrap-tabs::-webkit-scrollbar-track {
    background: var(--default-table-bg);
}

/* Handle */
.main-showroom .maker-item .wrap-tabs::-webkit-scrollbar-thumb {
    background: var(--default-border-color);
    opacity: 0.9;
    border-radius: 8px;
}

/* Handle on hover */
.main-showroom .maker-item .wrap-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--default-border-color);
    opacity: 1;
}

.main-showroom .maker-item .wrap-header {
	margin-bottom: 35px;
}
.main-showroom .maker-item .wrap-header .wrap-item {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.main-showroom .maker-item .wrap-header .wrap-content {
	margin-top: 10px;
}

.main-showroom .maker-item .tab-content a {
	text-decoration: none;
	color: var(--default-txt-color);
}
/* <<< */


.main-showroom .memberinfo.show .col-lg-7.text-break, .main-showroom .memberinfo .confirm .show {
	margin-left: 10px;
}
/* === front news / columns >>> */
.news-columns {
	margin-top: 60px;
	display: flex;
}
.columns,
.news {
	flex: 2;
	display: flex;
	flex-direction: column;
	padding: 0 calc(var(--default-spacing)*2);
}

.news-columns a {
	text-decoration: none;
	color: var(--default-txt-color);
}

.news-columns a.title {
	font-size: 30px;
	font-weight: bold;
	border-bottom: 1px solid var(--default-txt-color);
	margin-bottom: 20px;
	padding-left: 5px;
	text-decoration: none;
	color: var(--default-txt-color);
}
.news-columns a:hover{
	color: var(--default-txt-color);
	opacity: 0.9;
}
.news-columns a small {
	font-size: 18px;
	font-weight: normal;
}

.news-columns h3 {
	margin: 0 0 10px 0;
	font-size: 24px;
}

.news-block {
	display: flex;
	margin-bottom: 30px;
}
.news-image img {
	border: 2px solid lightgray;
	width: 160px;
    height: 138px;
}
.news-text {
	flex: 0 1 65%;
	padding-left: 2em;
}
input, select {
	outline: none;
	height: 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-width: 1px;
}

select {
	background: white;
}
.w-200{
	width: 200px;
}
.w-400{
	width: 400px;
}
.iframe-ggmap iframe{
	width: 100%;
}

.wrap-star a{
	padding: 0 5px;
	margin: 0;
	border-radius: 6px;
}
.wrap-star .wrap-icon-star{
	margin-right: 10px;
}
.wrap-star{
	margin-top: 10px;
	align-items: center;
}
/* <<< */

.bg-user-waiting {
	background: #c4dfb4;
}
.bg-user-success {
	background: #ddeaf6;
}
.bg-user-secondary {
	background: #d8d8d8;
}
.w-101{
	width: 101px;
}
/* memberinfo */
.memberinfo form label:not(.col-6){
	width: 195px;
}

/* === 詳細検索 === */

.search-drawer {
	padding: 5px;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid grey;
	border-bottom: 1px solid grey;
	background-color: #eee;
	box-shadow: 1px 1px 3px #33333388;
	border-radius: 4px;
}

.search-drawer:not(.open) {
	display: none;
}

.search-explanation {
	font-size: 80%;
	color: grey;
}

@media (min-width: 769px) {
	#stock-filter.search-drawer:not(.open) {
		display: block;
		border: none;
		box-shadow: none;
		background-color: transparent;
	}
}

.search-drawer-btn {
	display: block;
	margin: 0 auto 0 auto;
	padding: 5px;
	background-color: #eee;
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid grey;
	border-bottom: 1px solid grey;
	text-decoration: none;
	box-shadow: 1px 2px 2px #33333388;
	border-radius: 4px;
}

.search-drawer-btn.open {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.search-drawer-btn::before,
.search-drawer-btn::after {
	content: " ▼ ";
}

.search-drawer-btn.open::before,
.search-drawer-btn.open::after {
	content: " ▲ ";
}

.search-drawer-btn-container {
	display: flex;
	margin-top: -1px;
}