@charset "UTF-8";

/* 追加・上書きスタイル */
html, body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

/* ヘッダー関係-------------------------------------- */
.navbar-brand {
	padding-top:0px;
	padding-bottom: 0;
	margin-right: 0;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
}

#mainNav .navbar-brand img {
	margin: -15px 0 0 0;
}
header.masthead {
	padding-top: 28rem;
	padding-bottom: 24rem;
}
.header-animation {
	font: bold 10em / 1 Verdana, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
				background-clip: text;
				-webkit-background-clip: text;
				text-fill-color: transparent;
				-webkit-text-fill-color: transparent;
				animation: example 30s linear infinite;
}

@keyframes example {
	to { background-position-x: 200%; }
}

@media screen and (max-width: 992px) {
	#mainNav {
		background-color:rgba(255,255,255,0.0);
		padding: 0.5rem 0.75rem;
	}
	#mainNav .navbar-toggler {
		background-color:rgba(255,255,255,0.0);
		color: #FFF;
		padding: 0.2rem;
	}
	.fa-bars {
		font-size: 3em;
	}
}
@media screen and (max-width: 768px) {
	#mainNav .navbar-brand img {
		margin: -10px auto 0;
	}
	header.masthead {
		padding-top: 15rem;
		padding-bottom: 13rem;
	}
}
/* タイトル共通文字-------------------------------------- */
.title-custom {
	max-width: 300px;
	margin: 0 auto;
	padding: 0 0 10px;
	border-bottom: 1px solid #dddddd;
}

/* NEWS-------------------------------------- */
.news-position {
	width: 70%;
	margin: 0 auto;
	padding: 20px 0px 20px 20px;
	font-size: 90%;
}
.news-position span {
	margin-right: 10px;
	padding: 4px;
	font-size: 80%;
	background-color: #f49f00;
	color: #ffffff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.news-positions {
	padding:0;
}

@media screen and (max-width: 768px) {
	.news-position {
		width: 100%;
	}
	.news-positions {
		padding: 0 0 12px;
	}
}

/* GREETING-------------------------------------- */
.greeting-background {
	background-image: url("../assets/img/greeting-bg.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
	opacity: 0.9;
	display: block;
}

.greeting-position {
	width: 70%;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
	font-size: 90%;
	color: #ffffff;
}

.company-neme {
	text-align: right;
}

@media screen and (max-width: 768px) {
	.greeting-position {
		width: 100%;
	}
}

/* business-------------------------------------- */
.business-position {
	width: 70%;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
	font-size: 90%;
}
.business-position-title {
	padding: 12px 10px ;
	font-size: 130%;
}
.fa-check-square	{
	padding: 4px 0 0;
		color: #f49f00;
	font-size:160%;
}

@media screen and (max-width: 768px) {
	.business-position {
		width: 100%;
	}
}

/* contact-------------------------------------- */
.contact-position {
	width: 70%;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
	font-size: 90%;
}
@media screen and (max-width: 768px) {
	.contact-position {
		width: 100%;
	}
}

#err_msg {
	margin-bottom: 20px;
	padding: 10px;
	background-color: #FFF;
}
#err_msg p {
	color: #D00000;
}
#err_msg ul {
	padding-left: 15px;
}
#err_msg ul li {
	color: #D00000 !important;
	text-align: left;
	font-size: 0.8rem;
}


/* profile-------------------------------------- */
.profile-position {
	width: 70%;
	margin: 0 auto;
	padding: 20px 20px 0 20px;
	font-size: 90%;
}
.profile-position-title {
	padding: 14px 0 0;
	background-color: #f49f00;
	color: #ffffff;
	text-align: center;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.profile-position-list {
	padding: 14px;
}
@media screen and (max-width: 768px) {
	.profile-position {
		width: 100%;
	}
	.profile-position-title {
	margin: 0;
	padding: 14px;
	}
	.profile-position-list {
	margin: 0;
	padding: 14px;
	}
}

/* profile-------------------------------------- */
.footer-bg {
	background-color: #000;
}

/* エフェクト-------------------------------------- */
.fade-in-bottom {
	 opacity: 0;
	 animation-name: fadein-bottom;
	 animation-duration: 2.5s;
	 animation-timing-function: ease-out;
	 animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
	 0% {
		opacity: 0;
		transform: translateY(200px);
	 }
	 100% {
		opacity: 1;
		transform: translateY(0);
	 }
}
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.8);
	border: 1px solid #fff;
	opacity: 0.6;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0d8';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}