@charset "utf-8";


/* header
------------------------------------------------ */
div#header::before{
	display:none;
}

/* contents
------------------------------------------------ */
div#contents{
	margin-top:-240px;
	padding:0;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background-color:transparent;
}
div#contents div.inner{
	max-width:none;
	margin:0 auto;
	padding:60px 0;
}
h2.ttl {
	width: 480px;
	position: relative;
	margin: 0 auto 60px;
	padding: 0 0 15px;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px #4e7aff solid;
}
@media screen and (max-width:1084px){
	div#contents div.inner{
		width:calc(100% - 120px);
	}
}
@media screen and (max-width: 960px) {
	div#contents{
		margin-top:calc(-100vw*180/960 - 60px);
	}
	h2.ttl {
		margin-bottom:30px;
	}
}
@media screen and (max-width: 540px) {
	div#header {
		padding-top: 30px;
	}
	div#contents div.inner{
		width:calc(100% - 60px);
	}
	h2.ttl {
		width: 100%;
		font-size: 24px;
	}
	h2.ttl strong {
		width: 100%;
		margin-left: 0;
	}
}



/* project_list
------------------------------------------------ */
div#contents div#projects.inner{
	width:100vw;
	max-width:100vw;
	margin-left:calc(-100%/18);
	padding:0;
}
div#contents div#projects.inner h2.ttl{
	width: 28em;
	max-width: calc(100% - 10vw);
	position:absolute;
	top:calc(60vw + 15px);
	left:5vw;
	color:#fff;
	font-size:16px;
	text-align:left;
	border-bottom:none;
	z-index:3;
}
div#contents div#projects.inner h2.ttl:before{
	content:"Completed Project";
	display:block;
	color:#fff;
	font-size:48px;
	font-weight:bold;
	text-align:left;
}
div#contents div#projects ul.list_projects{
	width:100vw;
}
div#contents div#projects ul.list_projects li{
	width:25vw;
	height:calc(50vw*2/3);
	position: relative;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
div#contents div#projects ul.list_projects li a{
	width:25vw;
	height:calc(50vw*2/3);
	display:block;
}
div#contents div#projects ul.list_projects li:nth-child(1),
div#contents div#projects ul.list_projects li:nth-child(1) a{width:100vw;height:60vw;}
div#contents div#projects ul.list_projects li:nth-child(2),
div#contents div#projects ul.list_projects li:nth-child(2) a{width:50vw;}
div#contents div#projects ul.list_projects li picture,
div#contents div#projects ul.list_projects li picture img{
	display: block;
	width: 100%;
	height: 100%!important;;
}
div#contents div#projects ul.list_projects li picture img {
	object-fit: cover;
	object-position: center;
}
div#contents div#projects ul.list_projects li span.name{
	position:absolute;
	left:5vw;
	bottom:2.5vw;
	padding:3px 10px;
	text-align:center;
	line-height1;
	background-color:rgba(255,255,255,0.85);
}
div#contents div#projects ul.list_projects li:nth-child(1){width:100vw;height:60vw;}
div#contents div#projects ul.list_projects li:nth-child(2){width:50vw;}
div#contents div#projects ul.list_projects li:nth-child(3) span.name,
div#contents div#projects ul.list_projects li:nth-child(4) span.name{
	left:2.5vw;
}
@media screen and (max-width:1054px){
	div#contents div#projects.inner h2.ttl::before {
		font-size: 42px;
	}
}
@media screen and (max-width:960px){
	div#contents div#projects.inner h2.ttl {
		top:60vw;
	}
	div#contents div#projects.inner h2.ttl::before {
		margin-bottom:-10px;
	}
}
@media screen and (max-width:540px){
	div#contents div#projects.inner h2.ttl {
		font-size: 14px;
	}
	div#contents div#projects.inner h2.ttl::before {
		font-size: 36px;
	}
	div#contents div#projects ul.list_projects li:nth-child(2),
	div#contents div#projects ul.list_projects li:nth-child(2) a {
		width: 100vw;
	}
	div#contents div#projects ul.list_projects li:nth-child(3),
	div#contents div#projects ul.list_projects li:nth-child(4),
	div#contents div#projects ul.list_projects li:nth-child(3) a,
	div#contents div#projects ul.list_projects li:nth-child(4) a  {
		width: 50vw;
	}
}
@media screen and (max-width:450px){
	div#contents div#projects.inner h2.ttl::before {
		font-size: 32px;
	}
}
@media screen and (max-width:360px){
	div#contents div#projects.inner h2.ttl::before {
		font-size: 28px;
	}
}


/* topics_list
------------------------------------------------ */
div#contents div#topics.inner{
	width:calc(50vw - 120px);
	position:absolute;
	top:calc(60vw - 150px);
	right:0;
	padding:30px 60px;
	background-color:#fff;
	transform-origin:center center;
}
div#contents div#topics.inner h2.ttl{
	width: 100%;
	text-align:left;
	margin-bottom:0;
}
div#contents div#topics.inner div#topics_list{
	width:100%;
	margin-bottom:0;
}
div#contents div#topics.inner div#topics_list ul.list{
	margin-bottom:0;
	padding-bottom:0;
	border-bottom:none;
}
div#contents div#topics.inner a.link2{
	position:absolute;
	top:30px;
	right:60px;
}

@media screen and (max-width:960px){
	div#contents div#topics.inner {
		width: 100%;
		position: relative;
		top:0;
		padding: 30px 0;
	}
	div#contents div#topics.inner a.link2{
		position:absolute;
		top:25px;
		right:0;
	}
}
@media screen and (max-width:540px){
	div#contents div#projects.inner h2.ttl {
		top:90vw;
	}
	div#contents div#projects ul.list_projects li:nth-child(1),
	div#contents div#projects ul.list_projects li:nth-child(1) a{
		height:90vw;
	}
}

/* massege
------------------------------------------------ */
div#contents #message.inner{
	width:calc(100vw - 120px);
	margin-left:calc(-5%/9*10);
	padding:60px;
	background:url(../img/bk5.webp) no-repeat center center / cover;
}
div#contents #message h2.ttl{
	width: 50%;
	margin:0 0 15px;
	color:#fff;
	font-size:36px;
	text-align: left;
	line-height: 1.6;
	border-bottom: none;
}
#message p.outline{
	width: 50%;
	margin-bottom:30px;
	color:#fff;
}
#message a{
	color:#fff;
}
#message a:hover{
	color:orange;
}
@media screen and (max-width:960px){
	div#contents #message h2.ttl {
		width: 100%;
	}
	#message p.outline {
		width: 100%;
	}
}
@media screen and (max-width:540px){
	div#contents #message.inner{
		width:calc(100vw - 60px);
		padding:30px;
	}
	div#contents #message h2.ttl {
		font-size:32px;
	}
}
@media screen and (max-width:420px){
	div#contents #message h2.ttl {
		font-size:26px;
	}
}
@media screen and (max-width:360px){
	div#contents #message h2.ttl {
		font-size:24px;
	}
}

/* lvl_flange
------------------------------------------------ */

div#contents div#lvl_flange{
	width:calc(100vw - 60px*2);
	margin:0 0 0 calc(-5%/9*10);
	padding:60px;
	background-repeat:no-repeat;
	background-position:center;
	background-image:linear-gradient(rgba(0, 0, 0, 0.6)),url("../img/bk2.webp");
	background-size:cover;
	overflow:hidden;
}
div#lvl_flange div.photo{
	width:50%;
	max-width:calc(500px - 30px);;
	float:left;
	margin-right:60px;
	color:#fff;
}
div#lvl_flange div.photo img{
	margin-bottom:5px;
}
div#lvl_flange div.information{
	width:calc(100% - 530px);
	float:right;
}
div#lvl_flange h2.ttl{
	width: auto;
	margin: 0 0 30px;
	padding: 0;
	color:#fff;
	font-size:30px;
	text-align:left;
	line-height: 1.4;
	border: none;
}
div#lvl_flange p.outline{
	margin-bottom:30px;
	color:#fff;
}
div#lvl_flange ul.feature{
	position:relative;
	margin-left: 6em;
	padding-left: calc(30px + 1em);
	padding-right:190px;
	border-left: 1px #ccc solid;
}
div#lvl_flange ul.feature:after{
	width:175px;
	height:175px;
	content:"";
	position:absolute;
	right:0;
	top:0;
	display:block;
	background:#fff url(../img/top/lvl_flange2.webp) no-repeat center center / 160px auto;
}
div#lvl_flange ul.feature h3.ttl{
	position:absolute;
	top:0;
	left:-6em;
	color:#fff;
}
div#lvl_flange ul.feature li{
	margin-bottom:5px;
	color:#fff;
	text-indent:-1em;
}
div#lvl_flange ul.feature li:before{
	content:"●";
}
@media screen and (max-width:1480px){
	div#lvl_flange{
		min-height:560px;
	}
	div#lvl_flange div.photo{
		position:relative;
	}
	div#lvl_flange div.photo:after{
		width:175px;
		height:175px;
		content:"";
		position:absolute;
		left:0;
		bottom:-200px;
		display:block;
		background:#fff url(../img/top/lvl_flange2.webp) no-repeat center center / 160px auto;
	}
	div#lvl_flange ul.feature {
		margin-left: 0;
  		padding-left: 1em;
		padding-right: 0;
		border-left:none;
	}
	div#lvl_flange ul.feature::after {
		display: none;
	}
	div#lvl_flange ul.feature h3.ttl{
		width:calc(100% + 1em);
		position:static;
		margin-left:-1em;
		margin-bottom:15px;
		padding-bottom:15px;
		border-bottom:1px #fff solid;
	}
}
@media screen and (max-width:1054px){
	div#lvl_flange div.photo {
		width: 100%;
		max-width:750px;
		float: none;
		margin: 0 auto 30px;
	}
	div#lvl_flange div.photo:after {
		display:none;
	}
	div#lvl_flange div.information {
		width: 100% ;
		float: none;
	}
	div#lvl_flange ul.feature:after{
		width:175px;
		height:175px;
		content:"";
		position:absolute;
		right:0;
		top:calc(2em + 31px);
		display:block;
		background:#fff url(../img/top/lvl_flange2.webp) no-repeat center center / 160px auto;
	}
	div#lvl_flange ul.feature li {
		max-width: calc(100% - 205px);
	}
}
@media screen and (max-width:660px){
	div#lvl_flange ul.feature:after{
		position:static;
		margin:15px auto 0;
	}
	div#lvl_flange ul.feature li {
		max-width:100%;
	}
}
@media screen and (max-width:540px){
	div#contents #lvl_flange.inner{
		width:calc(100vw - 60px);
		padding:30px;
	}
	div#lvl_flange h2.ttl {
		font-size: 28px;
	}
}
@media screen and (max-width:420px){
	div#lvl_flange h2.ttl {
		font-size: 26px;
	}
}
@media screen and (max-width:360px){
	div#lvl_flange h2.ttl {
		font-size: 24px;
	}
}


/* contents_index
------------------------------------------------ */
div#contents_index{}
div#contents_index ul{}
div#contents_index ul li{
	width:calc(33.33% - 40px);
	min-height:calc(45px + 15em);
	position:relative;
	margin-right:60px;
	margin-bottom:90px;
}
div#contents_index ul li:nth-child(n+4){
	min-height:calc(45px + 13em);
}
div#contents_index ul li:nth-child(3n){
	margin-right:0;
}
div#contents_index ul li h3.name{
	margin-bottom:20px;
	color:#643232;
	font-family: "Source Sans 3", sans-serif;
	font-size:48px;
	font-weight:900;
	line-height:1;
}
div#contents_index ul li h3.name strong{
	display:block;
	margin-top:5px;
	font-family:"Noto Sans JP", Osaka, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ Ｐゴシック', 'MS PGothic';
	font-size:16px;
	font-weight:normal;
	line-height;1.5;
}div#contents_index ul li a.link2{
	position:absolute;
	left:0;
	bottom:0;
}
@media screen and (min-width:1560px){
div#contents_index ul li{
		min-height:calc(45px + 13.5em);
	}
	div#contents_index ul li:nth-child(n+4){
		min-height:calc(45px + 12em);
	}
}
@media screen and (min-width:1440px){
div#contents_index ul li{
		min-height:calc(45px + 12em);
	}
}

@media screen and (max-width:1084px){
	div#contents div.inner {
		width:100%;
	}
}
@media screen and (max-width:1054px){
	div#contents_index ul li {
		width: calc(50% - 30px);
	}
	div#contents_index ul li:nth-child(3n) {
		margin-right:60px;
	}
	div#contents_index ul li:nth-child(2n) {
		margin-right: 0;
	}
	div#contents_index ul li,
	div#contents_index ul li:nth-child(n+4){
		min-height:calc(45px + 13em);
	}
	div#contents_index ul li:nth-child(n+3){
		min-height:calc(45px + 10em);
	}
}
@media screen and (max-width:960px){
	div#contents_index ul li {
		width: calc(50% - 15px);
		margin-right:30px;
	}
	div#contents_index ul li:nth-child(3n) {
		margin-right:30px;
	}
	div#contents_index ul li:nth-child(2n) {
		margin-right: 0;
	}
	div#contents_index ul li h3.name {
		font-size: 40px;
	}
	div#contents_index ul li,
	div#contents_index ul li:nth-child(n+4){
		min-height:calc(45px + 13em);
	}
	div#contents_index ul li:nth-child(n+3){
		min-height:calc(45px + 11em);
	}
}
@media screen and (max-width:820px){
	div#contents_index ul li h3.name {
		font-size: 36px;
	}
	div#contents_index ul li,
	div#contents_index ul li:nth-child(n+4){
		min-height:calc(45px + 13em);
	}
	div#contents_index ul li:nth-child(n+3){
		min-height:calc(45px + 11em);
	}
}
@media screen and (max-width:720px){
	div#contents_index ul li h3.name {
		font-size: 32px;
	}
	div#contents_index ul li,
	div#contents_index ul li:nth-child(n+4){
		min-height:calc(45px + 13em);
	}
	div#contents_index ul li:nth-child(n+3){
		min-height:calc(45px + 11em);
	}
}
@media screen and (max-width:620px){
	div#contents_index ul li {
		width:100%;
		min-height:0!important;
		margin-bottom: 60px;
	}
	div#contents_index ul li:last-child {
		margin-bottom: 0;
	}
	div#contents_index ul li ,
	div#contents_index ul li:nth-child(3n) 
	div#contents_index ul li:nth-child(2n) {
		margin-right: 0!important;
	}
	div#contents_index ul li a.link2 {
		position: static;
		display: block;
		margin-top:15px;
	}
}
@media screen and (max-width:540px){
	div#contents_index ul li h3.name {
		font-size: 28px;
	}
}

/* access_map
------------------------------------------------ */
div#contents div#access_map.inner{
	padding-bottom:0;
}
div#access_map h3.name{
	margin-bottom:20px;
	padding:15px 30px 15px 0;
	color:#643232;
	font-family: "Source Sans 3", sans-serif;
	font-size:48px;
	font-weight:900;
	line-height:1;
	background-color:#fff;
}
@media screen and (max-width:540px){
	div#access_map h3.name {
	  font-size: 36px;
	}
}
@media screen and (max-width:420px){
	div#access_map h3.name {
	  font-size: 32px;
	}
}
@media screen and (max-width:360px){
	div#access_map h3.name {
	  font-size: 28px;
	}
}