/*
=========================================
cd: 20220617
ud: 20220617
=========================================
editer:
1. recca
2.
3.
=========================================
index:
1. html
2. header
3. footer
4. main
5. overwrite bootstarp
6. root-bg
7.
8.
9.
=========================================
*/





@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+TC:wght@400;500&family=Noto+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');





/* html =====================================*/
html {
	font-size: 0.85rem;
	line-height: 1.8rem;
}
html[lang="en-US"] main {
	font-size: 0.945rem;
	line-height: 1.6rem;
}

html[lang="en-US"] body {
	font-family: Arial, Helvetica, sans-serif !important;
}
.text-en, .en {
	font-family: 'Noto Sans', sans-serif !important;
}
/*html[lang="zh-hants"] body , .text-tc {
	font-family: 'Noto Sans TC', sans-serif !important;
}*/
html[lang="ja-jp"] body , .text-jp {
	font-family: 'Noto Sans JP', sans-serif !important;
}

body {
	min-width: 360px;
}

a {
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: bolder;
}

h2 {
	font-size: 1.7rem;
}
h3 {
	font-size: 1.55rem;
}
img {
	height: auto;
	max-width: 100%;
}







/* header ==================================*/
header {
	background-image: url("../images/bkgd_header.jpg");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain;
}
header nav {
	background: linear-gradient(180deg, #fdfdfb 0%, #e6e7d9 100%);
}
header nav {
	border-top: 3px #fcb913 solid;
}
header nav .nav-item {
	border-right: 1px #ccc solid;
}
header nav .nav-item:last-child {
	border-right: 0px #ccc solid;
}
header nav .nav-item > a {
	font-size: 1rem;
	font-weight: 600;
	padding: 0.7rem;
	text-transform: uppercase;
	transition: .2s all linear;
}
header nav .nav-item a:hover, header nav .nav-item a:active, header nav .nav-item a:focus {
	background: linear-gradient(180deg, #fcb913 0%, #fd8a15 100%);
	color: #fff;
}

.langs a {
	color: #797979;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}
.langs a:hover {
	color: #333;
}

.skip {
	position: absolute;
	top: -9999px;
}
.show-990, .show-640 {
	display: none !important;
}
.hide-990, .hide-640 {
	display: block !important;
}

@media screen and (max-width:991px) {
	nav .nav-item {
		border-bottom: 1px #ccc solid;
		border-right: 0px #ccc solid;
	}
	nav .nav-item:last-child {
		border-bottom: 0px #ccc solid;
	}
	
	.show-990 {
		display: block !important;
	}
	.hide-990 {
		display: none !important;
	}
	
}
@media screen and (max-width: 640px) {
	.hide-640 {
		display: none !important;
	}
	.show-640 {
		display: block !important;
	}
}




/* footer ==================================*/
footer {
	border-top: 1px #333 dotted;
	font-size: 0.8rem;
	margin-top: .75rem;
	padding-top: .75rem;
	text-transform: uppercase;
}
footer nav a:hover, .newsbox a:hover {
	text-decoration: underline;
}





/* main ====================================*/
body:not(.bg-index) main {
	padding-top: 20px;
}
body.order-page main {
	padding-top: 20px !important;
}

#context_home {
  width: 100%;
  height: 0%;
  margin: 0px;
  position: relative;
    padding-top: 57.446808%;
    overflow: hidden;
}

.carousel-item div {
  position: absolute;
  top: 7%;
  left: 5%;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  text-shadow: 2px 2px 3px #333;
}

.newsbox {
	background-color: rgba(252,134,3,0.95);
	border: solid 2px #fff;
	bottom: 30px;
	box-shadow: 2px 2px 5px #888888;
	height: 240px;
	left: 20px;
	max-width: 330px;
	padding: 10px 10px;
	position: absolute;
	width: 100%;
	z-index: 1000;
	
	transition: .2s all linear;
}
.newsbox h1 {
	font-size: 1rem;
	line-height: inherit;
}
.newsbox a {
	color: #000;
}
.newsbox ul {
	list-style-type: none;
	padding-left: 0.1rem;
}
.newsbox ul li:first-child {
	margin-bottom: 20px;
}
.newsbox .btn-more {
	color: #fff;
	position: absolute;
	top: 10px;
	right: 10px;
}


.ind-shortcut > div p {
	font-size: 0.9rem;
	color: #6699CC;
	font-weight: 600;
}
.ind-shortcut > div p span {
	color: #00337E;
	font-size: 1.3rem;
	font-weight: bold;
}
.ind-shortcut > div {
	box-shadow: 2px 2px 5px #999;
	max-width: 212px;
	overflow: hidden;
	position: absolute;
	right: 15px;
	top: 15%;
	z-index: 1;
	
	transition: .2s all linear;
}
.ind-shortcut > div:first-child {
	right: 245px;
	top: 7%;
}
.ind-shortcut > div:last-child {
	right: 50px;
	top: 53%;
}
.ind-shortcut > div > div {
	background-color: #fff;
	border: 1px #eee solid;
}
.ind-shortcut .sc-msg {
	background-color: rgba(0,0,0,0.8);
	font-size: 0.9rem;
	height: 0px;
	left: 0px;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
	width: 100%;
	
	transition: .2s all linear;
}
.ind-shortcut a {
	display: block;
	overflow: hidden;
}
.ind-shortcut a .sc-msg {
	color: #fff !important;
	display: block;
	height: 0px;
	padding: 0px 10px;
}
.ind-shortcut a:hover .sc-msg {
	bottom: 0px;
	height: 100px;
	padding: 10px;
}


.text-orange {
	color: #FC8B13 !important;
}
.text-blue, h2 {
	color: #003E99 !important;
}
.text_gray, h3 {
	color: #5283B3 !important;
}
.text-red {
	color: #9C0002 !important;
}


.nolst li {
	list-style-type: none;
}


.video-container {
  position: relative;
  padding-bottom: 56.25%;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.listing li {
	margin-bottom: 10px;
}
.listing-sankakukei li {
	list-style-type: none;
	position: relative;
}
.listing-sankakukei li::before {
	text-decoration: none;
	background-image: url(http://www.maringo.de/fileadmin/styles/maringo/img/sprites_left-top.png?1372846723);
	background-attachment: initial;
	background-size: initial;
	background-origin: initial;
	background-clip: initial;
	background-position: -556px -33px;
	background-repeat: no-repeat;
	content: '';
	width: 20px;
	height: 15px;
	display: block;
	position: absolute;
	left: -20px;
	top: 3px;
}


.content-nav ul {
	padding: 0px;
}
.content-nav ul li {
	border-top: 1px dotted #FDC137;
}
.content-nav ul li:last-child {
	border-bottom: 1px dotted #FDC137;
}
.content-nav ul li a {
	background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 100%);
	color: #5283A0;
	display: block;
	padding: 0.5rem;
	width: 100%;
}
.content-nav ul li a:hover {
	background: #fee7b1;
	color: #C97105;
}


.btn_en {
  /*background-image: url(../images/bg_btn_en.jpg);*/
	background-image: linear-gradient(180deg, #97c4d7 0%, #6d9bb2 3%, #407086 22%, #2a5369 22.1%, #2f6f8b 98%);
  	color: #fff;
  	padding-top: 4px;
  	text-align: center;
  	text-decoration: none;
  	min-width: 90px;
  	margin-right: 30px;
	border: 1px #328192 solid;
}
.btn_en:hover {
	background-image: linear-gradient(180deg, #bab5b1 0%, #928d89 3%, #65605c 22%, #4c4744 22.1%, #635a55 98%);
	border: 1px #675c5a solid;
	color: #fff;
	text-decoration: none;
}


.div-logout {
	position: absolute;
	top: 5px;
	right: 150px;
}
html[lang="en-US"] .div-logout {
		top: 2px;
		right: 170px;
}
html[lang="ja-jp"] .div-logout {
		top: 2px;
		right: 210px;
}


.btn_logout {
	background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(125,125,125,1) 100%);
	color: #fff !important;
	width: auto;
	border: none;
	padding: 7px 10px;
	border-radius: 7px;
}
.btn_logout:hover {
	background: linear-gradient(0deg, rgba(223,156,15,1) 58%, rgba(255,207,6,1) 100%);
	color: #fff;
}
@media screen and (max-width:640px) {
	.btn_logout {
		padding: 7px 10px !important;
		border-radius: 7px;
		position: absolute;
		top: 0px;
		right: 70px;
	}
}




.breadcrumb li:last-child {
  color: #F08209;
}

main h1:first-child {
	position: relative;
}
main h1:first-child > span {
	color: #fff;
  	font-weight: 600;
	left: 2%;
	position: absolute;
  	top: 10px;
	width: 47%;
}


.div-list-ul > ul {
	border-bottom: 1px #ccc dashed;
	border-radius: 0px !important;
}
.div-list-div > div {
	border-bottom: 1px #ccc dashed;
	border-radius: 0px !important;
	padding: 0.35rem;
}



.div-table {}
.div-table-thead {
	background-color: #CAE9FF;
}
.div-table-tbody {
	border-bottom: 1px #ccc solid;
}
.div-table-price, .div-table-btnAdd {
	align-items: center;
	display: grid;
	justify-content: start;
}
.div-table-btnAdd {
	justify-content: end;
}

.btnAdd, .btnAdd:hover, .btnAdd:focus, .btnAdd:active  {
	background: linear-gradient(0deg, rgba(223,156,15,1) 58%, rgba(255,207,6,1) 100%);
	color: #fff;
	width: auto;
	border: none;
	padding: 7px 10px;
	border-radius: 7px;
}

@media screen and (max-width:991px) {
	.div-table-thead {
		display: none;
	}
	.div-table-item {
		margin-bottom: 7px;
	}
	.div-table-price {
		padding-left: 120px;
		position: relative;
	}
	.div-table-price:before {
		content: attr(data-name);
		font-weight: bold;
		left: 10px;
		position: absolute;
	}
}


.div-table1 span {
	display: none;
}
.div-table2 tbody td span, .div-table3 tbody td span {
        display: none;
    }
@media screen and (max-width:991px) {
    .div-table2 thead, .div-table3 thead {
        display: none;
    }
    .div-table2 tbody tr {
        border-bottom: 1px #ccc solid;
    }
    .div-table2 tbody td, .div-table3 tbody td {
        border-bottom: 0px #ccc solid !important;
        display: inline-block;
        width: 49%;
    }
    .div-table2 tbody td:first-child, .div-table3 tbody td:first-child {
        width: 100%;
    }
    .div-table2 tbody td:last-child {
        padding-bottom: 10px;
        /*text-align: end;*/
        width: 100%;
    }
    .div-table2 tbody td span, .div-table3 tbody td span {
        display: inline;
        margin-right: 5px;
    }
    
    .div-table3 tbody tr {
        border-bottom: 1px #ccc solid;
        position: relative;
    }
    .div-table3 tbody td:first-child {
        width: 97%;
    }
    .div-table3 tbody td:nth-child(2) {
        padding: 0px 5px;
        width: 100%;
    }
    .div-table3 tbody td:nth-child(3) {
        width: 49%;
    }
    .div-table3 tbody td:nth-child(4) {
        text-align: end;
        width: 50%;
    }
    .div-table3 tbody td:last-child {
        position: absolute;
        right: 10px;
        top: 5px;
        width: 10px;
    }
    .div-table3 tbody tr.div-table3-total {
        background-color: #e7e7e7;
    }
    .div-table3 tbody tr.div-table3-total td {
        border: none;
    }
	.div-table3 tbody tr.div-table3-total td:nth-child(1) {
		width: 33%;
	}
	
	.div-table3 tbody tr.div-table3-total td:last-child {
        display: none;
        padding: 0px !important;
    }
    .div-table3 tbody tr.div-table3-total td:nth-child(2) {
        padding: 0px;
        text-align: end;
        width: 33%;
    }
    .div-table3 tbody tr.div-table3-total td:nth-child(3) {
        text-align: end;
        width: 30%;
    }
}
@media screen and (max-width:427px) {
	.div-table3 tbody td:nth-child(4) {
        text-align: start;
        width: 50%;
    }
}




#backtotop {
	color: #1685AF;
}




@media screen and (max-width:1140px) {
	.container-xl {
		background-color: rgba(255,255,255,0.95) !important;
	}
}
@media screen and (max-width:991px) {
	.newsbox {
		bottom: 0px;
		height: auto;
		left: 0px;
		max-width: inherit;
		position: relative;
		width: 100%;
	}
	.ind-shortcut > div {
		box-shadow: none;
		max-width: inherit;
		overflow: hidden;
		position: inherit;
		right: inherit;
		top: inherit;
		padding-bottom: 10px; 
	}
	.ind-shortcut > div > div::after {
		box-shadow: 2px 2px 5px #999;
		content: "";
		display: block;
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: -1;
		top: 0px;
		left: 0px;
	}
	
	.div-list-div > div {
		background-color: #fff;
	}
	.div-list-div > div div {
		padding-left: 110px;
		position: relative;
	}
	.div-list-div > div div:before {
		content: attr(data-title);
		font-weight: bold;
		position: absolute;
		left: 0px;
	}
	.div-list-div > div:first-child {
		display: none;
	}
	
	
}
@media screen and (max-width:750px) {
	main h1:first-child span {
		text-shadow: 0px 0px 5px #000;
		word-break: break-word;
		width: 98%;
	}
}






/* overwrite bootstarp =====================*/
.container-xl {
	background-color: rgba(255,255,255,1);
	max-width: 1140px;
	
	transition: .2s all linear;
}

.dropdown-menu {
  width: 100.5%;
  padding: 0rem;
  margin-top: 0px;
  border-radius: 0rem;
	z-index: 9999;
}
.dropdown-menu[data-bs-popper] {
  margin-top: 0px;
}
.dropdown-item {
  padding: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}



/* root-bg =================================*/
body {
	background: center center fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

body > .container-xl {
	border: 1px #ccc solid;
	border-top: none;
	box-shadow: 0px 3px 7px #ccc;
}

.bg-index {
	background-image: url("../images/bkgd01.jpg");
}
.bg-solutions {
	background-image: url("../images/bkgd.jpg");
}
.bg-service {
	background-image: url("../images/42-23872436_high.jpg");
}
.bg-events {
	background-image: url("../images/stock-photo-10333292-traffic-through-los-angeles.jpg");
}
.bg-profile {
	background-image: url("../images/zoom-8173249-3.jpg");
}
.bg-contact {
	background-image: url("../images/108365115.jpg");
}