/********** Common CSS **********/
:root {
	--bs-orange          : #EA5432;
	--bs-dark            : #333;
	--bs-body-color      : #333;
	--logo-color-red     : #ea5432;
	--logo-color-orange  : #f29844;
	--logo-color-yellow  : #f7e33b;
	--logo-color-teal    : #8ac782;
	--logo-color-cyan    : #80cddb;
	--logo-color-blue    : #4553a3;
	--logo-color-purple  : #6357a3;
	--bs-font-sans-serif : font-family: 'Noto Sans JP', sans-serif;
	--bs-body-font-family: font-family: 'Noto Sans JP', sans-serif;
	--bs-body-font-size  : 0.9rem;
}

h4,
.h4 {
	font-size: 1rem;
}

a,
a:hover,
.nav-link {
	color          : var(--bs-dark);
	text-decoration: none;
}

.aboutus__btn a:hover {
	color: var(--bs-white);
}

.aboutus__title,
.corporate-philosophy__title,
.message__title,
.services__title,
.corporate-info__title {
	font-size: 0.8rem !important;
	color    : var(--bs-dark);
}

.btn {
	border-radius: 0;
}

.pb-10px {
	padding-bottom: 10px !important;
}

/********** Nav CSS **********/
#mainNav .navbar-brand img {
	height: 2rem;
}

.navbar-brand img {
	height: 2rem;
}

/* 🍔 */
.navbar-dark .navbar-toggler {
	color : var(--bs-dark);
	border: none;
}

#mainNav {
	background-color: var(--bs-white);
}

#mainNav.navbar-shrink {
	background-color: var(--bs-white);
}

#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
	color: var(--bs-dark);
}

#mainNav .navbar-nav .nav-item .nav-link {
	color: var(--bs-dark);
}

#mainNav .navbar-nav .nav-item .nav-link {
	font-family: var(--bs-body-font-family);
}

.navbar-nav {
	font-weight: 900;
}

/********** Header CSS **********/
header.masthead {
	background: linear-gradient(rgba(0, 0, 0, 0.3),
			rgba(30, 30, 30, 0.2)),
		url(../assets/img/header-bg.jpg);
	padding-top   : 28rem;
	padding-bottom: 25rem;
}

header.masthead .masthead-subheading {
	font-size  : 3rem;
	line-height: 3.5rem;
	font-style : normal;
	font-family: 'Noto Sans JP', sans-serif;
}

.masthead__logo {
	width : 28%;
	margin: 0 auto;
}

/* SP */
@media (max-width: 768px) {
	.masthead__logo {
		width : 50%;
		margin: 0 auto;
	}

	header.masthead .masthead-subheading {
		font-size: 1.7rem;
	}

	header.masthead {
		background: linear-gradient(rgba(0, 0, 0, 0.3),
				rgba(30, 30, 30, 0.2)),
			url(../assets/img/header-bg_sp.jpg);
		padding-top   : 20rem;
		padding-bottom: 16rem;
	}
}

/********** Footer CSS **********/
.footer-brand img {
	height: 2.5rem;
}

.footer__copyright {
	background: var(--bs-dark);
	color     : var(--bs-white);
}

/********** Side decoration CSS **********/
.left-deco {
	width   : 1rem;
	position: fixed;
	left    : 50px;
	bottom  : 55%;
}

.right-deco {
	width   : 1rem;
	position: fixed;
	right   : 50px;
	bottom  : 65%;
}

/********** Page-top btn CSS **********/

#page_top {
	width        : 50px;
	height       : 50px;
	position     : fixed;
	right        : -50px;
	bottom       : 100px;
	background   : var(--bs-dark);
	border-radius: 50%;
}

#page_top a {
	position       : relative;
	display        : block;
	width          : 50px;
	height         : 50px;
	text-decoration: none;
}

#page_top a::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content    : '\f077';
	font-size  : 25px;
	color      : var(--bs-white);
	position   : absolute;
	width      : 25px;
	height     : 25px;
	top        : -5px;
	bottom     : 0;
	right      : 0;
	left       : 0;
	margin     : auto;
	text-align : center;
}

/********** Title Subtitle CSS **********/

.aboutus__subtitle,
.corporate-philosophy__subtitle,
.message__subtitle,
.services__subtitle,
.corporate-info__subtitle {
	font-size: 1.5rem !important;
	display  : inline-block;
	color    : var(--bs-dark);
}

.aboutus__subtitle {
	border-bottom: 3px solid var(--logo-color-teal);
}

.corporate-philosophy__subtitle {
	border-bottom: 3px solid var(--logo-color-cyan);
}

.message__subtitle {
	border-bottom: 3px solid var(--logo-color-blue);
}

.services__subtitle {
	border-bottom: 3px solid var(--logo-color-red);
}

.corporate-info__subtitle {
	border-bottom: 3px solid var(--logo-color-orange);
}

/********** About us CSS **********/
/********** Corporate Philosophy CSS **********/

.corporate-philosophy__icon {
	width     : 12rem;
	height    : 12rem;
	box-shadow: 0px 0px 8px #00000029;
	opacity   : 1;
	margin    : 0 auto;
}

.spacer20 {
	padding-top: 20rem;
}

.corporate-philosophy__txt {
	width      : 11rem;
	font-weight: 900;
	margin     : 0 auto;
}

/********** Message CSS **********/
/********** Services CSS **********/
.services__number {
	color      : var(--bs-orange);
	font-weight: 700;
	font-size  : 3rem;
	text-align : left;
	z-index    : 99;
	position   : absolute;
}

/********** Corporate-info CSS **********/