@charset "utf-8";

.main-visual {
	width: 100%;
	height: 705px;
	display: flex;
	align-items: center;
	padding-bottom: 50px;
	box-sizing: border-box;
	background: url("../img/top/mv.jpg");
	background-size: cover;
	background-position: center;
}
.main-visual > .mv-txt > h1{
	font-weight: 300;
	font-size: 3.0rem;
	letter-spacing: 0.1em;
	color: #fff;
	background: #E60F33;
	margin-bottom: 10px;
	display: inline-block;
	padding: 8px 15px;
}
.main-visual > .mv-txt {
	margin-left: 50px;
}
.main-visual > .mv-txt > p{
	font-weight: 300;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	line-height: 1.7;
	text-align: left;
	color: #fff;
	background: #E60F33;
	padding: 8px 15px;
}
.main-visual > .mv-txt > h1,
.main-visual > .mv-txt > p {
	opacity: 0;
	transform: translateX(-50px);
	animation-timing-function: ease;
}
.main-visual > .mv-txt > h1.show,
.main-visual > .mv-txt > p.show {
	opacity: 1.0;
	transition: 1.5s ;
	transform: translateX(0);
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1.5s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.news {
	width: 100%;
	max-width: 1200px;
	margin: -50px auto 0 auto;
	background: #fff;
	padding: 80px 100px 100px 100px;
	box-sizing: border-box;
}
.news{
	display: flex;
}
.news dt{
	width: 160px;
}
.news dd .news-link {
	margin-top: 30px;
	text-align: right;
}
.news dd .news-link a{
	font-size: 1.4rem;
	color: #505050;
	text-decoration: none;
}
.news dd .news-link a:before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    display: inline-block;
}
.news dt span{
	font-family: Roboto;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	color: #e92c4b;
	display: block;
	margin-bottom: 8px;
}
.news dt h2{
	font-weight: 500;
	font-size: 2.0rem;
	letter-spacing: 0.1em;
	color: #505050;
}
.news dd{
	width: calc( 100% - 160px );
}
.news dd li{
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 0 0 26px 0;
	border-bottom: solid 2px #E6E6E6;
	margin-bottom: 26px;
	letter-spacing: 0.1em;
	display: flex;
	flex-wrap: wrap;
}
.news dd li a {
	color: #505050;
	text-decoration: none;
}
.news dd li a:hover {
	opacity: 0.7;
	transition: 0.4s ;
}
.news dd li .data{
	width: 7em;
}
.news dd li .txt{
	width: calc( 100% - 7em );
}
.kv-area {
	width: 100%;
	padding: 100px 0;
	text-align: center;
}
.kv-area > a {
	text-decoration: none;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	display: block;
}
.kv-area > a > div {
	width: 100%;
	background: #fff;
	background:rgba(255,255,255,0.8);
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	padding: 55px;
	box-sizing: border-box;
}
.kv-area > a > div > .ttl{
	font-family: Roboto;
	font-weight: 400;
	font-size: 2.3rem;
	letter-spacing: 0.2em;
	color: #e92c4b;
}
.kv-area > a > div > .ttl > span:after{
	content: url("../img/common/ico-cross.svg");
	margin: 0 15px 0 15px;
}
.kv-area > a > div > h2{
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: #444;
	margin: 10px auto 30px;
}
.kv-area > a > div > .btn{
	width: 128px;
	height: 34px;
	border-radius: 17px;
	background: #fff;
	border: 1px solid #bcbcbc;
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	color: #444;
}
.kv-area._philosophy {
	background: url("../img/common/bg-philosophy.jpg");
	background-size: cover;
}
.kv-area._about {
	background: url("../img/common/bg-about.jpg");
	background-size: cover;
}
@media only screen and (min-width: 901px) {
	.kv-area > a:hover > div > .btn{
		color: #fff;
		background: #e92c4b;
		transition: 0.4s ;
		border-color: #e92c4b;
	}
	.kv-area > a:hover > div {
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
		transition: 0.4s ;
	}
}

@media only screen and (max-width: 900px) {
	.main-visual {
		height: 550px;
		align-items: flex-end;
		padding-bottom: 0;
		box-sizing: border-box;
		background: url("../img/top/mv-sp.jpg");
		background-size: cover;
		background-position: center;
	}
	.main-visual > .mv-txt > h1{
		font-size: 2.0rem;
		padding: 10px 15px;
	}
	.main-visual > .mv-txt {
		margin-left: 0;
		margin-bottom: -30px;
	}
	.main-visual > .mv-txt > p{
		font-weight: 300;
		font-size: 1.2rem;
		padding: 10px 15px;
		width: 80%;
	}
	.news {
		margin: 80px auto 0 auto;
		padding: 0 30px 50px 30px;
	}
	.news{
		flex-direction: column;
	}
	.news dt{
		width: 100%;
		display: flex;
		align-items: baseline;
		margin-bottom: 20px;
	}
	.news dt span{
		font-size: 1.2rem;
	}
	.news dt h2{
		font-size: 1.6rem;
		margin-left: 5px;
	}
	.news dd{
		width: 100%;
	}
	.news dd li{
		padding: 0 0 12px 0;
		margin-bottom: 12px;
	}
	.news dd li .data{
		width: 100%;
		font-size: 1.2rem;
		font-weight: 500;
		padding-bottom: 5px;
	}
	.news dd li .txt{
		width: 100%;
	}
	.kv-area {
		padding: 20px;
		box-sizing: border-box;
	}
	.kv-area > a {
		text-decoration: none;
		width: 100%;
		max-width: 780px;
		margin: 0 auto;
		display: block;
	}
	.kv-area > a > div {
		padding: 25px 10px;
	}
	.kv-area > a > div > .ttl {
		font-size: 1.2rem;
	}
	.kv-area > a > div > .ttl > span:after{
		content: url("../img/common/ico-cross-sp.svg");
		margin: 0 5px;
	}
	.kv-area > a > div > h2{
		font-size: 1.2rem;
		margin: 10px auto 15px;
	}
	.kv-area > a > div > .btn{
		width: 104px;
		height: 30px;
		border-radius: 15px;
		font-size: 1.2rem;
	}
}
@media only screen and (max-width: 320px) {
	.kv-area > a > div {
		padding: 25px 1px;
	}
	.kv-area > a > div > .ttl {
		font-size: 1.0rem;
		letter-spacing: 0.05em;
	}
	.kv-area > a > div > .ttl > span:after{
		margin: 0 5px;
	}
}