@charset "utf-8";
/****************************
main visual
****************************/
.main_visual {
	min-width: 1200px;
  /*max-width: 1400px;*/
  margin-bottom: 100px;
  background: url(../../images/main_back.jpg) no-repeat center top / cover;
  height: 49vw;
  min-height: 800px;
  position: relative;
}
.main_visual h2 {
	width: 560px;
  position: absolute;
  top: 230px;
  left: 120px;
}

/****************************
concept
****************************/
.concept {
	position: relative;
	width: 100%;
	min-width: 1200px;
	margin: 0 0 120px 0;
}
.concept > img {
	width: 50%;
	float: left;
}
.concept .copy {
	position: absolute;
	top: 50%;
	left: 75%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);	
	width: 50%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
}
.concept .copy > div {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	display: inline-table;
}
.concept .copy > div span {
}
.concept .copy h2 {
	font-family: 'Noto Serif JP', serif;
	font-size: 150%;
	margin: 0 0 0 70px;
	letter-spacing: 0.25em;
}
.concept .copy p {
	font-size: 95%;
	line-height: 250%;
	letter-spacing: 0.2em;
}

/****************************
press
****************************/
.press {
    margin-bottom: 120px;
}
.press h2 {
    text-align: center;
    font-size: 1.8em;
    position: relative;
    color: #4d4d4d;
}
.press h2:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -20px;
    display: inline-block;
    width: 20px;
    height: 2px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #d92328;
}
.press_links{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 50px 0;
}
.press_links li {
    border-bottom: 1px #bfbfbf solid;
}
.press_links li a:hover {
    opacity: 0.6;
    transition: .3s;
}
.press_links li:last-child {
    margin-bottom: 0;
}
.press_links li a {
    display: flex;
    align-items: flex-start;
    color: #4d4d4d;
    padding: 30px 15px;
}
.date,
.ttl {
    line-height: 1.5;
}
.date {
    margin-right: 30px;
    font-weight: bold;
    font-size: 90%;
}
.press_more {
    display: block;
    text-align: center;
    width: 200px;
    margin: 0 auto;
    padding: 12px 30px;
    background-color: #333;
    color: #fff;
}
.press_more:hover {
    opacity: 0.6;
    transition: .3s;
}

/****************************
menu
****************************/
.top_menu {
	margin-bottom: 90px;
    height: 300px;
    background: linear-gradient(#fff 50%, #efefef 50%);
}
.top_menu_grey {
	background: linear-gradient(#fff 50%, #efefef 50%);
}
.top_menu ul {
	width: 920px;
	margin: 0 auto;
}
.top_menu ul li {
	float: left;
	margin-right: 40px;
	width: 200px;
	background: #fff;
}
.top_menu ul li:last-child {
	margin-right: 0;
}
.top_menu ul li a {
	display: block;
	width: 200px;
	text-align: center;
	border: 1px solid #bfbfbf;
	padding-top: 35px;
}
.top_menu ul li a img {
	width: 70px;
	margin: 0 auto ;
}
.top_menu ul li a p {
	font-weight: bold;
	line-height: 150%;
	padding: 25px 0;
	color: #4d4d4d;
}
.top_menu ul li a p span {
	color: #D60C18;
	font-size: 90%;
	font-weight: bold;
}

/****************************
fbs site
****************************/
.fbs_site {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    max-width: 920px;
    width: 90%;
    margin: 0 auto 90px;
}
.fbs_site a {
    flex-basis:calc((100% - 30px) / 2);
    max-width:calc((100% - 30px) / 2);
    padding: 10px;
}

/*
.fbs_site {
	width: 920px;
	margin: 0 auto 90px auto;
}
.fbs_site a {
	display: block;
	float: left;
}
.fbs_site a:nth-child(2n+1) {
	margin-right: 40px;
}
.fbs_site a img {
	width: 440px;
}

/****************************
banner
****************************/
.banner {
	padding: 50px 0;
	background: #efefef;
	/*max-width: 1400px;*/
}
.banner > div {
	width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.banner a {
	display: inline-block;
    width: 320px;
}
.banner a:nth-child(2n) {
	margin: 0 10px;
}



@media (max-width: 812px) {
/****************************
header
****************************/
.header_contents nav ul li a {
	color: #fff;
}
/* menu icon */
.header_contents button .menu_border {
	background-color: #fff;
}
	
/****************************
main visual
****************************/
.main_visual {
	min-width: 100%;
  max-width: 100%;
  height: 680px;
  min-height: 680px;
	width: 100%;
	background-position: right -150px bottom -90px;
  background-size: auto;
	margin: 0 0 60px 0;
}
.main_visual h2 {
	width: 80%;
    position: absolute;
    top: 100px;
    left: 40px;
}

/****************************
concept
****************************/
.concept {
	min-width: 100%;
	padding-bottom: 260px;
    margin-bottom: 90px;
}
.concept > img {
	position: relative;
	top: 260px;
	width: 80%;
	float: none;
	
}
.concept .copy {
	top: 0;
	left: inherit;
	right: 0;
	transform: translateY(0%) translateX(0%);
	-webkit- transform: translateY(0%) translateX(0%);	
	width: 80%;
	float: none;
	display: flex;
    justify-content: center;
    align-items: center;
}
.concept .copy > div {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	display: inline-table;
	width: 70%;
	background: #fff;
	padding-bottom: 20px;
	height: max-content;
}
.concept .copy > div span {
	text-combine-upright: all;
	-ms-text-combine-horizontal: all;
}
.concept .copy h2 {
	font-size: 140%;
	margin: 0 0 0 70px;
}
.concept .copy p {
	font-size: 90%;
}

/****************************
press
****************************/
.press_links{
    width: 95%;
    padding: 30px 20px;
}
.press_links li:hover {
    opacity: 1;
    transition: unset;
}
.press_links li a {
    padding: 30px 10px;
}
.date {
    margin-right: 20px;
}
.ttl {
    font-size: 95%;
}
.press_more:hover {
    opacity: 1;
    transition: unset;
}

/****************************
menu
****************************/
.top_menu {
    height: auto;
    background: linear-gradient(#fff 70%, #efefef 70%);
}
.top_menu_grey {
	background: linear-gradient(#fff 65%, #efefef 40%);
}
.top_menu ul {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 10%;
}
.top_menu ul li {
	width: 49%;
	margin-bottom: 5%;
}
.top_menu ul li:nth-child(2n) {
	margin-right: 0;
}
.top_menu ul li:nth-child(2n+1) {
	margin-right: 2%;
	
}
.top_menu ul li a {
	width: 100%;
	padding-top: 20%;
	padding-bottom: 0;
}
.top_menu ul li a img {
	width: 30%;
}
.top_menu ul li a p {
	color: #4d4d4d;
	padding: 5% 0 0 0;
}
.top_menu ul li a p span {
	font-size: 100%;
}

/****************************
fbs site
****************************/
.fbs_site {
	display: block;
}
/*
.fbs_site a {
	display: block;
	float: none;
	margin-bottom: 30px;
}
.fbs_site a:nth-child(2n+1) {
	margin-right: 0;
}
.fbs_site a img {
	width: 100%;
}
*/

/****************************
banner
****************************/
.banner {
	max-width: 100%;
}
.banner > div {
	width: 90%;
    margin: 0 auto;
}
.banner a {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
}
.banner a:nth-child(2n) {
	margin: 0 0 10px 0;
}




}

@media (max-width: 480px) {
.main_visual {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    margin: 0 0 80px 0;
}
/****************************
concept
****************************/
.concept {
    padding-bottom: 240px;
}
.concept > img {
    top: 250px;
}
.concept .copy {
	width: 80%;
}
.concept .copy > div {
	width: 70%;
	padding-bottom: 20px;
	font-size: 80%;
}
.concept .copy h2 {
	font-size: 140%;
	margin: 0 0 0 30px;
}
.concept .copy p {
	font-size: 90%;
}

/****************************
press
****************************/
.press {
    margin-bottom: 80px;
}
.press h2 {
    font-size: 140%;
}
.press_links {
    width: 90%;
    padding: 30px 0;
}
.press_links li a {
    display: block;
    padding: 20px 5px;
}
.date {
    margin: 0 0 5px 0;
}
.ttl {
    font-size: 90%;
}
.press_more {
    font-size: 90%;
}
/****************************
menu
****************************/
.top_menu {
    margin-bottom: 50px;
}
.top_menu ul {
    width: 90%;
}
.top_menu ul li a p {
	font-size: 75%;
}

/****************************
fbs site
****************************/
.fbs_site {
	margin-bottom: 50px;
}

/****************************
banner
****************************/


}