/* designed by Value UP HD */
html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}
body {
	background: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 1.8;
	color: #222;
	box-sizing: border-box;
}

/* general */
ul {list-style-type: disc;}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1000px;}
.halfpage {width: 70%; margin: 0 auto;}
.sectionbox {padding: 3% 0;}
.subsectionbox {margin-bottom: 5%;}
.no-lists {list-style-type: none; padding-left: 0;}
.nospcbttm {padding-bottom: 0!important; margin-bottom: 0!important;}
.get-shadow {box-shadow: 0 0 5px #222;}
.get-corner {border-radius: 5px;}
.get-circle {border-radius: 50%;}
.get-btm-line {text-decoration: underline;}
.get-corner {border-radius: 10px;}
.get-highlight {background-color: yellow;}
.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;}
.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: "Yu Mincho", serif;}
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48;
	vertical-align: middle;
}
.instructor-position {font-size: 60%;}
.instructor-pict {
	border-radius: 220px;
	background: linear-gradient(to bottom,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
	max-width: 400px;
	overflow: hidden;
}
.badge {text-shadow: none!important;}
.remarks {font-size: 80%;}

/* font sizes */
.fsize-1x {font-size: 100%;}
.fsize-15x {font-size: 150%;}
.fsize-2x {font-size: 200%;}
.fsize-25x {font-size: 250%;}
.fsize-3x {font-size: 300%;}
.fsize-35x {font-size: 350%;}

/* color set */
.txt-navy {color: #003553;}
.txt-red {color: #CC0033;}
.txt-org {color: #F78E1E;}
.txt-deep-org {color: #F15B22;}
.txt-gold {color: #C8A560;}
.txt-yellow {color: yellow;}
.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);}
.text-bg-warning {background-color: #C8A560!important;}

/* headings */
h1 img {width: 14%; margin: 15px 0px 15px 2px;}
h1, h2, h3 {font-weight: 700; margin-bottom: 20px;}
.hding {padding: 10px; background-color: #e00820; color: #fff;}
.hding span {
	display: block;
	padding: 10px;
	border: 1px solid #fff;
}
.sectitle {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 40px;
	border-bottom: 1px dashed #ccc;
	font-weight: bold;
	font-size: 220%;
}
.sec-title-fttr {
	display: inline-block;
	width: 20%;
	height: 5px;
	background-color: #ccc;
	position: absolute;
	left: 40%;
	bottom: -3px;
}

/* button */
.btn-primary {
	background: #CC0033;
	border-color: #CC0033;
	color: #fff;
}
.btn-primary, .btn-warning, .btn-info {
	font-size: 160%;
	font-weight: 700;
	padding: 10px 30px;
}
.btn:hover {
	background-color: #003553;
	border-color: #003553;
}
.btn .material-symbols-outlined {vertical-align: top;}
.apply-button-span {padding: 3% 0;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {background-color: #003553; color: #fff;}
.btn-warning {
	color: #fff;
	text-shadow: 0 0 4px #222;
	background: linear-gradient(to bottom,  rgba(254,251,210,1) 0%,rgba(198,160,55,1) 47%,rgba(244,209,64,1) 100%);
}
.btn-warning:hover {background: rgba(196,157,55,1); border-color: rgba(244,209,64,1); color: #fff;}
.btn-info {background-color: #003453; color: #fff;}
.btn-info:hover {background-color: navy; color: #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, footer {padding: 20px 0;}
header img, footer img {height: 70px; width: auto;}
#footerTerms h2 {
	font-size: 120%;
	margin-top: 0;
	color: #333;
}
#footerTerms h4 {font-size: 100%; font-weight: bold;}
#footerTerms li {margin-bottom: 5px;}
#ftrTerms2 li {margin-bottom: 0;}
#section02 h3 span {display: block; font-size: 60%;}

/* hero */
#hero {
	background: navy url('img/hero-bg.jpg') no-repeat center top; 
	background-size: cover;
}
#hrrightTag {
	position: absolute;
	bottom: 40px;
	right: 0;
	width: 70%;
	z-index: 4;
	text-align: right;
}

/* intro section */
#intro {
	background: grey url('img/bg-intro.jpg') no-repeat center center;
	background-size: cover;
}
#intro h2 img, #section03 h2 img {height: 84px; width: auto;}

#section06 h3 {font-size: 300%;}

/* instructor section */
#instructor .text-bg-primary {background-color: #C8A560!important;}
#instructorConnect {
	padding: 16px;
	background-color: rgba(255,255,255,0.15);
}
#instructorConnect a {color: #fff;}
#instructorConnect a:hover {text-decoration: none;}
#section05 a:hover {text-decoration: none;}

/* responsive fixes */
@media screen and (min-width: 668px) {
	.view-pc, .br-pc, .br-tb {display: block;}
	#hroTxt {font-size: 150%;}
	#hero > .container {position: relative;}
	#hero > .container > .row {min-height: 500px;}
	footer {padding: 0;}
	footer .subsectionbox {margin-bottom: 3%;}
	#plphdrRight {text-align: right; padding-top: 1%;}
	#plphdrRight li {margin-left: 10px;}
	.hrh3px {padding-left: 70%;}
	#eventTime {padding-bottom: 0;}
	#intro ul {margin-left: 5%; margin-bottom: 0;}
	#hrrightTag {padding-right: 15%;}
	#eventPlace {margin-bottom: 3%;}
	#evntPlceRight {margin-top: 0.65%;}
	#eventPlace .halfpage {margin-top: 5%; padding-left: 5%;}
	#eprmark {padding-left: 15%;}
	#mbheropict {visibility: hidden;}
}
@media screen and (max-width: 1024px) {
	.container {overflow: hidden;}
	#hero > .container > .row {min-height: 450%;}
	#intro p {margin-left: 0;}
	#eventTime h3 {font-size: 400%;}
}
@media screen and (min-width: 668px) {
	#hero > .container {position: relative;}
	#hero a {position: absolute; right: 21%; bottom: 10%; z-index: 2;}
	#hero a img {height: 86px; width: auto;}
	#herbtnbx {overflow: none;}
}
@media screen and (max-width: 667px) {
	.sectionbox {padding: 3rem 0;}
	footer {padding-bottom: 20%; padding-top: 0;}
	#footerTerms {padding-top: 0; margin-top: 0;}
	.hrh3px {text-align: right; padding-right: 7%;}
	.container {overflow: hidden;}
	.view-mb, .br-mb {display: block;}
	.halfpage {width: 100%;}
	.subsectionbox {margin-bottom: 10%;}
	.apply-button-span {padding: 3rem 0; font-size: 70%;}
	#phlpHeader {text-align: center;}
	#plplogo {margin-bottom: 20px;}
	#plphdrRight ul {margin-bottom: 0;}
	#eventTime h3 {font-size: 220%;}
	#eventTime h4 {font-size: 150%;}
	#evntPlceLeft {text-align: center; font-size: 100%;}
	.instructor-pict {max-width: 60%; margin: 0 auto 5%;}
	#intro .fsize-15x {font-size: 120%;}
	#s3date h3 {font-size: 120%;}
	#s3date h1 {font-size: 160%;}
	#s3abslnk {padding-top: 5%; padding-bottom: 0;}
	#section04 h2 {font-size: 100%;}
	#section03 h4 {font-size: 100%!important;}
	#herbtnbx {padding: 3% 5%; text-align: center; background: #003553; margin-left: -16px; margin-right: -16px;}
	#section06 h3 {font-size: 160%;}
	#appybtmbx a {width: 100%;}
	#appybtmbx a:first-child {margin-bottom: 10px;}
	#herbtnbx .btn-primary {font-size: 120%;}
	#intro h2 img, #section03 h2 img {width: 100%; height: auto;}
}
@media screen and (max-width: 375px) {
	#phdSubmit img, #phdRgnx img, #phdRgnMail img {max-height: 40px;}
	#plphdrRight .btn-primary {line-height: 1; padding: 7px 16px;}
	#eventTime h3 {font-size: 180%;}
	.sectitle {font-size: 150%;}
	#eventTime .badge {font-size: 120%;}
}