/* designed by Green Labo Bangkok */
html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}
body {
	background: #fff;
	font-family: "Noto Sans JP",'avenir_regularregular', -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 1.42857143;
	color: #222;
	box-sizing: border-box;
}

/* general */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 800px;}
.halfpage {width: 70%; margin: 0 auto;}
.sectionbox {padding: 60px 0;}
.subsectionbox {margin-bottom: 30px;}
ul {list-style-type: disc;}
.no-lists {list-style-type: none; padding-left: 0;}
.nospcbttm {padding-bottom: 0!important; margin-bottom: 0!important;}
.getshadow {box-shadow: 0 0 5px #222;}
.getcorner {border-radius: 5px;}
.getcircle {border-radius: 50%;}
.get-btm-line {text-decoration: underline;}
.txtshadow {text-shadow: 0 0 3px #000;}
.br-pc, .br-tb, .br-mb {display: none;}
.view-pc, .view-mb, .hidely {display: none;}
.setclearline {clear: both; float: none; height: 1px; overflow: hidden;}
.get-corner {border-radius: 10px;}
.no-btm-margin {margin-bottom: 0!important;}
.txt-orange {color: #F78E1E;}
.fit-line {letter-spacing: -1px;}
.font-sans {font-family: 'メイリオ', 'Meiryo', 'Yu Gothic', ＭＳ Ｐゴシック, MS P Gothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, arial, sans-serif, verdana, Helvetica;}
.font-serif {font-family: 'Yi Mincho', 'Hiragino Mincho Pro', 'MS Mincho', serif;}
.remarks {font-size: 80%;}
.wrapbox {
	margin: 40px 0;
	padding: 16px 20px;
	text-align: center;
	border-radius: 10px;
}
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48;
	vertical-align: middle;
}
.btn-primary {
	font-size: 160%;
	font-weight: 700;
	padding: 10px 30px;
	background: #CC0033;
	border-color: #CC0033;
	color: #fff;
}
.btn:hover {
	background-color: #003553;
	border-color: #003553;
}

/* color set */
.txt-navy {color: #003553;}
.txt-red {color: #CC0033;}
.txt-org {color: #F78E1E;}
.txt-deep-org {color: #F15B22;}
.txt-gold {color: #C8A560;}
.txt-grey {color: #D1D3D4;}
.txt-white {color: #fff;}
.txt-black {color: #222;}
.bg-navy {background-color: #003553;}
.bg-red {background-color: #CC0033;}
.bg-org {background-color: #F78E1E;}
.bg-light-org {background-color: rgba(247,142,30,0.15);}
.bg-deep-org {background-color: #F15B22;}
.bg-gold {background-color: #C8A560;}
.bg-light-gold {background-color: rgba(200,165,96,0.05);}
.bg-grey {background-color: #D1D3D4;}
.bg-light-grey {background-color: rgba(209,211,212,0.3);}
.bg-light-azure {background-color: #a3bdfa;}
.bg-light-blue {background-color: #e0e6ec;}

/* headings */
h1 img {width: 14%; margin: 15px 0px 15px 2px;}
h1, h2, h3 {font-weight: 700; margin-bottom: 20px;}
h2.sectitle {
	margin-top: 0;
	margin-bottom: 30px;
	font-weight: 300;
	font-size: 20px;
}
.hding {padding: 10px; background-color: #e00820; color: #fff;}
.hding span {
	display: block;
	padding: 10px;
	border: 1px solid #fff;
}

/* back to top */
#back2top {
	position: fixed;
	right: 5px;
	bottom: 5px;
	line-height: 96px;
	font-size: 96px;
	width: 120px;
	height: 120px;
	text-align: right;
	z-index: 5;
}
#back2top a {
	display: block;
	padding: 16px;
	color: navy;
	text-shadow: 0 0 10px #fff;
}
#back2top a:hover {color: red;}
#back2top a .material-symbols-outlined {font-size: 72px; background: rgba(255,255,255,0.6); border-radius: 5px;}

/* header & footer */
#plphdrRight li {display: inline-block; vertical-align: middle;}
#plphdrRight .btn-primary {font-size: 120%;}
#phdSubmit img, #phdRgnx img, #phdRgnMail img {max-height: 50px;}
header {padding: 0;}
footer {padding: 20px 0;}
header img, footer img {height: 70px; width: auto;}
#phlpHeader {padding-bottom: 0;}
#plplogo {padding-bottom: 20px}
#plplogo img {height: 100px;}
footer {font-size: 90%;}
footer p {margin-bottom: 0;}
#ftrTerms2 li {margin-bottom: 0;}
#section02 h3 span {display: block; font-size: 60%;}

/* hero */
#hero {
	padding: 0;
	background: linear-gradient(to right,  rgba(6,24,46,1) 0%,rgba(19,52,81,1) 45%,rgba(19,52,81,1) 100%);
}
#hero .container {position: relative;}
#heroPict {
	position: absolute;
	width: 60%;
	right: 0;
	bottom: 0;
}
#heroText {
	position: absolute;
	width: 70%;
	left: 0;
	top: 70px;
	z-index: 5;
}
#heroText h3 {padding-left: 5%;}
#heroText h2 {
	font-size: 270%;
	font-weight: 700;
	text-shadow: 0 0 7px #000;
}
#heroBAName {
	padding-top: 5%;
	text-shadow: 0 0 7px #000;
	line-height: 1.2;
}
#heroBAName strong {font-size: 120%; font-weight: 700;}

/* section 1 */
.nav-tabs {
	padding-top: 10px;
	bottom: -3px;
	background: transparent url('img/bg-tab.jpg') repeat-x left 55px;
	border-bottom: none;
	overflow: hidden;
}
.nav-tabs .nav-link {
	padding: 10px 60px;
	background: #eee url('img/bg-tab.jpg') repeat-x left 44.5px;
	border: none;
	border-radius:8px 8px 0 0;
	z-index:2;
	position:relative;
	cursor:pointer;
	color:#222;
	font-size: 120%;
	font-weight: bold;
	border-top: 1px solid #003553;
}
.nav-tabs .nav-link:before,
.nav-tabs .nav-link:after {
	display:block;
	content:" ";
	position:absolute;
	top:-0.5px;
	height:101%;
	width:40px;
	background: #eee url('img/bg-tab.jpg') repeat-x left 44px;
}
.nav-tabs .active:before,
.nav-tabs .active:after {
	border-bottom: 3px solid #fff;
	background-image: none;
	height: 60px;
}
.nav-tabs .nav-link:before {
	right:-19px;
	transform: skew(30deg, 0deg) ;
	-webkit-transform: skew(30deg, 0deg) ;
	-moz-transform: skew(30deg, 0deg) ;
	-o-transform: skew(30deg, 0deg) ;
	-ms-transform: skew(30deg, 0deg) ;
	border-radius:0 8px 0 0;
	border-top: 1px solid #003553;
	border-right: 1px solid #003553;
}
.nav-tabs .nav-link:after {
	left:-19px;
	transform: skew(-30deg, 0deg) ;
	-webkit-transform: skew(-30deg, 0deg) ;
	-moz-transform: skew(-30deg, 0deg) ;
	-o-transform: skew(-30deg, 0deg) ;
	-ms-transform: skew(-30deg, 0deg) ;
	border-radius:8px 0 0 0;
	border-top: 1px solid #003553;
	border-left: 1px solid #003553;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover:before,
.nav-tabs .nav-link:hover:after {
	background-color:#eee;
	border-color: #003553;
}
.nav-tabs .active,
.nav-tabs .active:before,
.nav-tabs .active:after,
.nav-tabs .active:hover,
.nav-tabs .active:hover:before,
.nav-tabs .active:hover:after {
	background-color:#fff;
	border-bottom-color: #fff;
	background-image: none;
}
.nav-tabs .nav-link.active {border-top: 1px solid #003553;}
.nav-tabs .active {z-index:3; background-image: none;}
.heading-lines {
	position: relative;
	font-size: 20px;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	color: #003553;
	margin-bottom: 40px;
}
.heading-lines:before, .heading-lines:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: 50%;
	height: 2px;
	content: '\a0';
	background-color: #ccc;
}
.heading-lines:before {
	margin-left: -50%;
	text-align: right;
}
.table-content-box {
	margin-bottom: 5%;
	padding: 5px;
	border: 1px solid #003553;
}
.table-content-box h5 {
	font-size: 90%;
	text-transform: uppercase;
	padding: 5px 8px;
	background: rgba(0,0,0,0.05);
}
.table-content-box a {color: #003553; text-decoration: none; font-weight: bold;}
.table-content-box a:hover {text-decoration: underline;}
.table-content-box .box-inner {
	border: 3px solid #003553;
	padding: 20px;
}
.baBox {margin-bottom: 40px;}
.baBox .bg-white {padding: 44px 30px; line-height: 1.4;}
.baBox .bg-white h5 {font-weight: bold;}
.baBox .bg-white h3 {font-weight: bold; font-size: 150%; text-align: left;}
.ba-pict-wrap {position: relative;}
#bapictinfo {position: absolute; right: 16%; bottom: 0; max-width: 60%;}
#jpTapContsec02 {margin-top: 15%;}

#section02 h2 {font-size: 200%; font-weight: bold;}
.carousel-inner {padding-left: 120px; padding-right: 120px;}
.carousel-item {padding-bottom: 44px;}
.carousel-caption {bottom: 0; color: #333; position: static; padding-bottom: 0; line-height: 1.4;}
.carousel-caption p {margin-bottom: 0;}

#section03 h4 {margin-top: 10px;}
#s3sign img {max-width: 50%; height: auto;}

#section04 h2 {
	padding: 40px 0;
	font-size: 280%;
}
.tab-content {padding-top: 40px;}
.tab-content h3 {text-align: center; font-size: 200%; font-weight: 600;}
.tab-content h3.bg-light-azure {font-size: 120%;}
figure {margin-bottom: 50px;}
figcaption {margin-top: 20px;}
#serviceLists ul {
	list-style-type: none;
	padding: 0;
}
#serviceLists li {
	display: inline-block;
	margin: 0 10px 20px;
	width: 20%;
	height: 120px;
	line-height: 120px;
	background: #ddd;
	border-radius: 10px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 5px #000;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
#serviceLists li#s1lst01 {background-image: url('img/s1lst01.jpg');}
#serviceLists li#s1lst02 {background-image: url('img/s1lst02.jpg');}
#serviceLists li#s1lst03 {background-image: url('img/s1lst03.jpg');}
#serviceLists li#s1lst04 {background-image: url('img/s1lst04.jpg');}
#serviceLists li#s1lst05 {background-image: url('img/s1lst05.jpg');}
#serviceLists li#s1lst06 {background-image: url('img/s1lst06.jpg');}
#serviceLists li#s1lst07 {background-image: url('img/s1lst07.jpg');}
#serviceLists li#s1lst08 {background-image: url('img/s1lst08.jpg');}
#serviceLists li#s1lst09 {background-image: url('img/s1lst09.jpg');}
#serviceLists li#s1lst10 {background-image: url('img/s1lst10.jpg');}
#serviceLists li#s1lst11 {background-image: url('img/s1lst11.jpg');}
#serviceLists li#s1lst12 {background-image: url('img/s1lst12.jpg');}
#serviceLists li a {display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; font-size: 90%;}
#serviceLists li:hover {opacity: 0.85;}
#serviceLists li span {line-height: 1.2;}
.hd-border-bottom {
	font-weight: bold;
	color: #666;
}
.hd-border-bottom .hd-line {
	display: block;
	margin: 20px auto;
	width: 50%;
	height: 2px;
	background-color: #666;
}

/* responsive fixes */
@media screen and (max-width: 480px) {
	#heroText h2 {font-size: 170%;}
}
@media screen and (max-width: 640px) {
	body {font-size: 95%;}
	.container {overflow: hidden;}
	.view-mb, .br-mb {display: block;}
	.halfpage {width: 100%;}
	.sectionbox {padding: 40px 0;}
	#heroText {top: 30px;}
	#heroText h3 {font-size: 80%;}
	#heroText h2 {font-size: 190%; margin-bottom: 10px; margin-left: 5%; text-shadow: 0 0 12px #000; font-weight: bolder;}
	#heroBAName {font-size: 70%; text-shadow: 0 0 5px #000; margin-left: 5%; text-shadow: 0 0 5px #000; font-weight: bolder;}
	#plplogo img {height: 60px;}
	#hero .container {min-height: 250px; overflow: visible;}
	#heroPict {z-index: 2;}
	#section01 h2 {font-size: 200%; margin-bottom: 0;}
	.wrapbox {margin: 15px 0 30px; font-size: 90%;}
	#section01 li {margin: 0 5px 10px; height: 80px; line-height: 80px; font-size: 70%;}
	.carousel-inner {padding-left: 80px; padding-right: 80px;}
	#section02 {padding-bottom: 0;}
	#section03 h4 {font-size: 120%;}
	#section04 h2 {font-size: 150%; padding: 30px 0;}
	.tab-content h3 {font-size: 150%;}
	.nav-tabs .nav-link {padding: 5px 30px; font-size: 90%; line-height: 44px;}
	.nav-tabs .nav-link:before, .nav-tabs .nav-link:after {top:-1px;}
	#section05 .bg-white {margin-bottom: 30px; padding-bottom: 50%; font-size: 60%;}
	#bfftr {font-size: 60%;}
	#section05 .bg-white h5 {font-size: 120%; margin-bottom: 10px;}
	#section05 .bg-white h3 {font-size: 160%;}
	.nav-tabs {background-image: none;}
	.nav-tabs .nav-link:before, .nav-tabs .nav-link:after {background-position-y: 58px;}
	.nav-tabs .active:before, .nav-tabs .active:after {background-position-y: 99px; height: 107%;}
	.nav-tabs .nav-link {background: #eee url('img/bg-tab.jpg') repeat-x left 58px;}
	.nav-tabs .nav-link:before, .nav-tabs .nav-link:after {border-bottom: none; height: 60px;}
	.nav-tabs .nav-link.active {background-image: none;}
	.embed-responsive iframe {aspect-ratio: 16/9; width: 100%; height: auto;}
	.carousel-caption p, #section05 .bg-white p {font-size: 15px;}
	#s3sign img {max-width: 35%;}
	#serviceLists li {width: 40%;}
	#serviceLists li a {font-size: 100%;}
	#bapictinfo {position: static;}
	.ba-pict-wrap img {max-width: 50%;}
}
@media screen and (min-width: 641px) {
	.view-pc, .br-pc, .br-tb {display: block;}
	.sectionbox {padding: 60px 0;}
	.subsectionbox {margin-bottom: 60px;}
	#plphdrRight {text-align: right; padding-top: 1%;}
	#plphdrRight li {margin-left: 10px;}
	#hero .container {max-width: 1000px;}
	.table-content-box ul {padding-left: 20%;}
	.hd-border-bottom {font-size: 90%;}
}