@charset "utf-8";

/*HEADER*/
.keyvisual {
}

@media screen and (max-width: 767.98px) {
/*BASE*/
#headerNavi nav .sp li.project .en {
	color:rgb(175, 47, 47) !important;
}
section:not(.keyvisual) h1.title {
	font-size:18px;
}

/*Information*/
#info .contntent-box {
	padding:4rem 2rem;
}
#info .contntent-box .img-box {
	margin-bottom:1rem;
}
#info .contntent-box .img-box .photo-box img {
	width:100%;
}
#info .contntent-box .comment-box {
	text-align:justify;
}

/*Potential*/
#potential {
	padding:4rem 0;
	background-color:#e9e6e0;
}
#potential h1.title {
	padding:0 2rem;
}
#potential .example {
	padding:0rem 2rem 2rem;
}
#potential .example .img-box {
	width:50%;
	margin:0 1em 0 0;
	float:left;
}
#potential .example .txt-box {
	text-align:justify;
}
#potential .example .comment_1 {
	margin-bottom:1em;
}

#potential .chart_pyramid {
	background-image:url(../images/project/potential_chart_pyramid_bgimg.jpg);
	background-size:cover;
}
#potential .chart_pyramid .content-box {
	padding:2rem;
}
#potential .chart_pyramid .content-box img {
	width:100%;
}

#potential .poi {
	padding:2rem 2rem 0;
}
#potential .poi .txt-box {
	text-align:justify;
}
#potential .poi .img-box {
}
#potential .poi .img-box h2 {
	text-align:center;
	margin-bottom:1rem;
}
#potential .poi .price-annual,
#potential .poi .price-rate {
	padding:2rem 0;
}
/*価格上昇率*/
#potential .poi .price-annual table {
	font-size:10px;
	border-spacing:1px;
	background-color:#666;
}
#potential .poi .price-annual table {
	font-size:10px;
	border-spacing:1px;
	width:100%;
	background-color:#666;
	margin-bottom:1rem;
}
#potential .poi .price-annual table th,
#potential .poi .price-annual table td {
	text-align:center;
	padding:.25rem .05rem;
}
#potential .poi .price-annual table th {
	font-weight:bold;
	white-space:nowrap;
	background-color:#CCC;
}
#potential .poi .price-annual table thead th:nth-of-type(1) {
	width:34%;
}
#potential .poi .price-annual table thead th:nth-of-type(2) {
	width:26%;
}
#potential .poi .price-annual table td {
	background-color:#FFF;
}

#potential .poi .price-rate .scroll {
	border:solid 1px #666;
}
/*縦向き*/
@media (orientation: portrait){
#potential .poi .price-rate .scroll {
	max-height:calc( 80vh - 60px);
}
}
/*横向き*/
@media (orientation: landscape){
}
/*年次価格推移*/
#potential .poi .price-rate table {
	font-size:10px;
	border-spacing:0;
	width:100%;
	border-right:solid 1px #666;
}
#potential .poi .price-rate table th,
#potential .poi .price-rate table td {
	text-align:center;
	padding:.25rem .5rem;
	border-bottom:solid 1px #666;
	border-left:solid 1px #666;
}
#potential .poi .price-rate table th {
	font-weight:bold;
	white-space:nowrap;
	background-color:#CCC;
}
#potential .poi .price-rate table thead th:nth-of-type(1),
#potential .poi .price-rate table tbody td:nth-of-type(1)  {
	border-left:none 0px;
}
#potential .poi .price-rate table td {
	background-color:#FFF;
}
#potential .poi .price-rate div.scroll table th {
	top:0;
	left: auto;
}

#potential .poi .txt-box .reference {
	display:flex;
	column-gap:1rem;
	padding-top:2rem;
}
#potential .poi .txt-box .reference h2 {
	white-space:nowrap;
}
#potential .poi .txt-box .reference ul {
	flex-grow:1;
}
#potential .poi .txt-box .reference li:not(:last-child) {
	margin-bottom:1rem;
}

#potential .poi .txt-box .partner {
	padding-top:2rem;
}
#potential .poi .txt-box .partner h2 {
	margin-bottom:1rem;
}


/*Credit*/
/*Brand*/
#credit .brand {
	background-color:#ede1c7;
	padding:4rem 2rem;
}
#credit .contntent-box .img-box,
#credit .contntent-box .txt-box {
}
#credit .contntent-box .img-box {
	padding:0 2rem;
	margin-bottom:2rem;	
}
#credit .contntent-box .comment-box {
	text-align:justify;
}
/*Team*/
#credit .team {
	text-align:center;
	padding:4rem 2rem;
}
#credit .team dt {
	color:#a97845;
	margin-bottom:1.5rem;
}
#credit .team dd {
	color:#666;
}
#credit .team dd:not(:last-of-type) {
	margin-bottom:5rem;
}
#credit .team dd ul li:not(:last-of-type) {
	margin-bottom:2rem;
}
}

/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/
#headerNavi.display-on li.project .en {
	color:rgb(175, 47, 47) !important;
}

section:not(.keyvisual) h1.title {
	font-size:24px;
}
	
/*HEADER*/
.keyvisual .img-bg {
	top: 50%;
	transform: translateY(-50%);
}

/*Information*/
#info .contntent-box {
	display:flex;
	flex-flow: row nowrap;
	justify-content:center;
	align-items:stretch;
	max-width:1440px;
	margin:auto;
}
#info .contntent-box .img-box,
#info .contntent-box .txt-box {
	display:flex;
	width:calc(100% / 2);
	align-items:center;
	padding-top:100px;
	padding-bottom:100px;
}
#info .contntent-box .img-box {
	background:#070506 url(../images/project/info_img0101.jpg) no-repeat center center;
	background-size:cover;
}
#info .contntent-box .txt-box {
	box-sizing:content-box;
	background-color:#FFF;
	padding-left:60px;
	padding-right:80px;
}
#info .contntent-box .comment-box {
	text-align:justify;
}

/*Potential*/
#potential {
	padding:100px 0;
}
#potential h1.title {
	padding-bottom:40px;
	margin-bottom:0;
}
#potential .example {
	display:grid;
	grid-template-rows:auto;
	grid-template-columns: 1fr 1fr;
	gap:1rem 0;
	max-width:1440px;
	margin:auto;
}
#potential .example .img-box,
#potential .example .txt-box {
}
#potential .example .img-box {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
	align-content:center;
	background-color:#dfd7ca;
	padding:60px 80px;
}
#potential .example .txt-box {
	text-align:justify;
	padding-left:80px;
	padding-right:60px;
}
#potential .example .comment_1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	align-content:end;
}
#potential .example .comment_2 {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	align-content:start;
}

#potential .chart_pyramid {
	background-image:url(../images/project/potential_chart_pyramid_bgimg.jpg);
	background-size:cover;
	padding:100px 80px;
}
#potential .chart_pyramid .content-box {
	max-width:1440px;
	margin:auto;
	text-align:center;
}
#potential .chart_pyramid .content-box img {
	width:100%;
}

#potential .poi {
	padding:80px 80px;
}
#potential .poi .txt-box {
	max-width:860px;
	margin:auto;
	text-align:center;
}
#potential .poi .img-box {
	display:flex;
	flex-flow: row nowrap;
	justify-content:center;
	align-items:stretch;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
	padding:80px 0;
}
#potential .poi .img-box h2 {
	text-align:center;
	margin-bottom:1rem;
}
#potential .poi .price-annual,
#potential .poi .price-rate {
	width:calc(100% / 2 - 60px);
}

#potential .poi .price-annual table {
	font-size:12px;
	border-spacing:1px;
	background-color:#666;
}
#potential .poi .price-annual table {
	font-size:12px;
	border-spacing:1px;
	width:100%;
	background-color:#666;
	margin-bottom:1rem;
}
#potential .poi .price-annual table th,
#potential .poi .price-annual table td {
	text-align:center;
	padding:.25rem 0;
}
#potential .poi .price-annual table th {
	font-weight:bold;
	white-space:nowrap;
	background-color:#CCC;
}
#potential .poi .price-annual table thead th:nth-of-type(1) {
	width:34%;
}
#potential .poi .price-annual table thead th:nth-of-type(2) {
	width:26%;
}
#potential .poi .price-annual table td {
	background-color:#FFF;
}

#potential .poi .price-rate table {
	font-size:12px;
	border-spacing:1px;
	width:100%;
	background-color:#666;
}
#potential .poi .price-rate table th,
#potential .poi .price-rate table td {
	text-align:center;
	padding:.25rem .5rem;
}
#potential .poi .price-rate table th {
	font-weight:bold;
	white-space:nowrap;
	background-color:#CCC;
}
#potential .poi .price-rate table td {
	background-color:#FFF;
}

#potential .poi .txt-box .reference {
	padding-top:60px;
}
#potential .poi .txt-box .reference h2 {
	margin-bottom:1rem;
}
#potential .poi .txt-box .partner {
	padding-top:60px;
}
#potential .poi .txt-box .partner h2 {
	margin-bottom:1rem;
}

/*Credit*/
/*Brand*/
#credit .contntent-box {
	display:flex;
	flex-flow: row nowrap;
	justify-content:center;
	align-items:stretch;
	max-width:1440px;
	margin:auto;
}
#credit .contntent-box .img-box,
#credit .contntent-box .txt-box {
	display:flex;
	width:calc(100% / 2);
	align-items:center;
	padding-top:100px;
	padding-bottom:100px;
}
#credit .contntent-box .img-box {
	background-color:#ede1c7;
	padding-left:80px;
	padding-right:80px;
}
#credit .contntent-box .txt-box {
	background-color:#FFF;
	padding-left:60px;
	padding-right:80px;
}
#credit .contntent-box .comment-box {
	text-align:justify;
}
/*Team*/
#credit .team {
	text-align:center;
	max-width:1440px;
	margin:auto;
	padding-top:100px;
	padding-bottom:100px;
}
#credit .team dt {
	color:#a97845;
	margin-bottom:1.5rem;
}
#credit .team dd {
	color:#666;
}
#credit .team dd:not(:last-of-type) {
	margin-bottom:6rem;
}
#credit .team dd ul li:not(:last-of-type) {
	margin-bottom:2rem;
}

}

@media screen and (min-width: 1600px) {
/*Information*/
#info .contntent-box .txt-box {
	padding-right:0;
}
#info .contntent-box .comment-box {
	text-align:justify;
}
/*Potential*/
#potential .example .txt-box {
	padding-left:0;
}
/*Credit*/
/*Brand*/
#credit .contntent-box .txt-box {
	padding-right:0;
}

}