@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#container {
	background-color: #333232;
}
.projects .menuBox .naviLink01 li:nth-of-type(2),
.menuBox .naviLink01 li:nth-of-type(1) {
	opacity: 0.3;
}
.projects .menuBox .naviLink01 li:nth-of-type(1) {
	opacity: 1;
}
#gFooter .list01 a,
.projects #gFooter .list02 a {
	opacity: 0.3;
}
.projects #gFooter .list01 a {
	opacity: 1;
}
#main {
	background-color: #030303;
}
#main .topLinkBox {
	position: absolute;
	top: 75px;
	width: calc(50% + 35px);
	right: 0;
	display: flex;
	color: #fff;
	z-index: 6;
	letter-spacing: 0.14em;
	font-family: 'Roboto', sans-serif;
}
#main .topLinkBox .rBox {
	flex: 1;
}
#main .topLinkBox a {
	color: #E8E8E8;
}
#main .topLinkBox h2 {
	font-size: 2rem;
	font-weight: 300;
}
#main .topLinkBox .linkUl {
	max-width: 500px;
	margin: 2px 0 0 16.2%;
	display: flex;
	flex-wrap: wrap;
	width: 70%;
}
#main .topLinkBox .linkUl li {
	margin-bottom: 7px;
	width: 34%;
}
#main .topLinkBox .linkUl a {
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	border-bottom: 1px solid transparent;
}
#main .topLinkBox .linkUl .on a {
	border-bottom-color: #AAAAAA;
}
#main .listUl {
	display: flex;
	flex-wrap: wrap;
}
#main .listUl .pho img {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .hover a {
	display: block;
}
#main .listUl li {
	width: 50%;
	overflow: hidden;
}
#main .listUl .pho {
    opacity: 0;
	padding-bottom: 65.5%;
	display: block;
	position: relative;
	transition: all 1s ease;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}
#main .listUl .over {
	display: block;
	overflow: hidden;
}
#main .inner {
	padding-right: 70px;
}
#main .inner .noContent {
    padding: 128px 7.2% 0; 
}
#main .inner .noContent p {
    font-size: 2rem;
    color: #FFF;
}
#main .txtBox {
	/* margin: 0 auto;
	max-width: 1366px; */
	padding: 18px 7.2%;
	min-height: 136px;
	box-sizing: border-box;
	display: flex;
	color: #ADADAD;
	font-size: 1.1rem;
	font-family: 'Roboto', sans-serif;
}
#main .txtBox h2 {
	max-width: 70%;
	word-wrap:break-word;
	margin-top: 7px;
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.06em;
}
#main .txtBox h2>span {
	display: block;
	overflow: hidden;
}
#main .txtBox h2>span span {
	display: block;
	line-height: 1.2;
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
    opacity: 0;
}
#main .visible .txtBox h2 > span span {
    opacity: 1;
    animation: flowup 1.5s ease forwards;
    -webkit-animation: flowup 1.5s ease forwards;
}
#main .showBox li {
	display: none;
}
@keyframes flowup
{
    0% {transform: translateY(100%); -webkit-transform: translateY(100%);}
    100% {transform: translateY(0); -webkit-transform: translateY(0);}
}
@-webkit-keyframes flowup 
{
    0% {transform: translateY(100%); -webkit-transform: translateY(100%);}
    100% {transform: translateY(0); -webkit-transform: translateY(0);}
}

#main .txtBox .txt {
	flex: 1;
	letter-spacing: 0.06em;
	margin: 5px 0 0 42px;
	line-height: 1.7;
}
#main .sec01 {
	margin-bottom: 124px;
	position: relative;
}
#main .sec01::before {
	/* width: 100%;
	height: 20px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #333232;
	content: ""; */
}
#main .listUl01 li {
	margin: 0 71px 52px 0;
	width: calc((100% - 142px) / 3);
}
#main .listUl01 .pho {
	padding-bottom: 62%;
}
#main .listUl01 span {
	display: block;
}
#main .listUl01 .txt {
	padding: 21px 0;
	color: #ADADAD;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	font-family: 'Roboto', sans-serif;
}
#main .listUl01 .ttl {
	margin: 5px 0 10px;
	font-size: 1.8rem;
	font-weight: 400;
}
#main .listUl01 .ttl > span {
    display: block;
    overflow: hidden;
}
#main .listUl01 .ttl > span span {
    display: block;
    line-height: 1;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
}
#main .listUl01 .visible .ttl > span span {
    animation: flowup 1.5s ease forwards;
    -webkit-animation: flowup 1.5s ease forwards;
}
#main .listUl01 .txt01 {
	line-height: 1.7;
}
#main .listUl01 .txt01 .shuffle {
    display: inline-block;
}
#main .listUl01 .margin {
	padding: 21px 27px;
}
#main .comBtn {
	margin-top: 27px;
}
#main .sec02 .listUl a {
	overflow: hidden;
}
@media all and (-ms-high-contrast:none){
	#main .listUl01 li {
		margin-right: 70px;
	}
}
@media all and (min-width: 768px) and (max-width: 1000px) {
	#main .topLinkBox .linkUl {
		width: 96%;
	}
}
@media all and (min-width: 768px) {
	#main .listUl01 li:nth-child(3n) {
		margin-right: 0;
	}
	#container {
		background-color: #333232;
	}
    #main .listUl01 li:not(:nth-child(3n-2)) .margin {
        padding-left: 0;
    }
}
@media all and (min-width: 1150px) {
	#main .hover a:hover {
		opacity: 1;
	}
	#main .hover a:hover .pho{
		transform: scale(1.05,1.05);
	}
	#main .sec02 .listUl a:hover {
		opacity: 1;
	}
	#main .sec02 .listUl a:hover .pho {
		transform: scale(1.05,1.05);
	}
}
@media all and (max-width: 767px) {
	#gFooter .list01 a:hover,
	.projects #gFooter .list02 a:hover {
		opacity: 0.3 !important;
	}
	#main .topLinkBox {
		width: auto;
		top: 116px;
		left: 0;
		box-sizing: border-box;
		padding: 0 30px;
		z-index: 11;
		transition: opacity 0.5s;
	}
	#main .topLinkBox .faqBox {
		margin: 7px 0 0 34px;
		padding-left: 7px;
		width: 66%;
		font-size: 1rem;
		letter-spacing: 0.1em;
		background-color: #333232;
	}
	#main .topLinkBox .faqBox .ttl {
		margin-bottom: 2px;
		padding-bottom: 2px;
		position: relative;
		border-bottom: 1px solid #A3A3A3;
	}
    #main .topLinkBox .faqBox .edd-root {
        width: 100%;
        margin-bottom: 2px;
		padding-bottom: 2px;
		position: relative;
    }
    #main .topLinkBox .faqBox .edd-root::after {
        display: none;
    }
    #main .topLinkBox .faqBox .edd-root .edd-head {
        border: none;
        font-size: 1rem;
        color: #FFF;
        padding-left: 7px;
    }
    #main .topLinkBox .faqBox .edd-root .edd-head .edd-value {
        padding: 0 0 2px 0;
        border-bottom: 1px solid #A3A3A3;
    }
    #main .topLinkBox .faqBox .edd-root .edd-head .edd-arrow {
        display: none;
    }
    #main .topLinkBox .faqBox .edd-root .edd-head .edd-select {
        border: none;
    }
    #main .topLinkBox .faqBox .edd-root .edd-body {
        width: 100%;
    }
	#main .topLinkBox .faqBox .ttl::before {
		content: "";
		position: absolute;
		right: 4px;
		top: 4px;
		border: 5px solid transparent;
		border-top-color: #BCBCBC;
	}
    #main .topLinkBox .faqBox .edd-root::before {
        content: "";
		position: absolute;
		right: 4px;
		top: 4px;
		border: 5px solid transparent;
		border-top-color: #BCBCBC;
    }
	#main .topLinkBox .faqBox .txt {
		margin-bottom: 2px;
	}
    #main .topLinkBox .faqBox .edd-option {
        padding: 0 0 0 7px;
        margin-bottom: 2px;
        font-size: 1rem;
        color: #FFF;
    }
    #main .topLinkBox .faqBox .edd-body {
        background-color: #333232;
        border: none;
    }
    #main .topLinkBox .faqBox .edd-option-selected::before {
        display: none;
    }
	#main .topLinkBox .faqBox .contBox {
		display: none;
	}
	#main a:hover .listUl .pho img {
		opacity: 0 !important;
	}
	#main .listUl li {
		width: 100%;
		display: none;
	}
	#main .listUl li:first-child {
		display: block;
	}
    #main .showBox .listUl li {
        display: none
    }
	#main .inner {
		padding-right: 0;
	}
    #main .inner .noContent {
        padding: 92px 31px 0; 
    }
	#main .listUl .pho {
		padding-bottom: 56.5%;
	}
	#main .listUl a:hover .pho img {
		opacity: 0 !important;
	}
	#main .txtBox h2 {
		margin-bottom: 5px;
		font-size: 2rem;
	}
	#main .txtBox {
		padding: 8px 27px;
		display: block;
		min-height: 106px;
	}
	#main .txtBox .txt {
		margin: -1px 0 0 0;
		line-height: 1.6;
		font-size: 0.9rem;
	}
	#main .sec01 {
		margin-bottom: 24px;
	}
	/* #main .sec01 .inner {
        margin-right: 45px;
	} */
	#main .listUl01 {
		margin-right: 45px;
	}
	#main .listUl01 li {
		margin: 0 0 11px;
		display: block;
		width: 50%;
	}
	#main .listUl01 .pho {
		padding-bottom: 62%;
	}
	#main .listUl01 .txt {
		padding: 6px 0;
	}
	#main .listUl01 .ttl {
        margin: 3px 0 4px;
		font-size: 1.4rem;
	}
	#main .listUl01 .margin {
		padding: 6px 0;
	}
	#main .listUl01 li:nth-child(odd) .txt {
		padding: 6px 8px;
	}
	#main .comBtn {
		position: relative;
		right: 23px;
	} 
}
@media all and (max-width: 374px) {
	#main .topLinkBox .faqBox {
		margin: 7px 0 0 15px;
		padding-left: 0;
		width: 72%;
	}
}