@charset "UTF-8";
/* CSS Document */

#Mainvisual { display: flex; justify-content: flex-end; align-items: flex-end; position: relative; }
#Slide { width: 61.458%; padding: 46.85% 0 0 0; position: relative; }
#Slide ul { position: absolute; top: 0; width: 100%; }
#Mainvisual .txt { width: 28.125%; padding-right: 5%; box-sizing: border-box; }
#Mainvisual .txt img { max-width: 436px; width: 100%; height: auto; }
#Mainvisual .txt p,#Mainvisual > p { display: block; width: 4px; height: 88px; margin: 60px auto 0 auto; position: relative; overflow: hidden; }
#Mainvisual .txt p::before,#Mainvisual > p::before { content: ""; width: 1px; height: 88px; background: #606060; position: absolute; top: -88px; left: 0; animation: arrow 3s ease 0s infinite normal; z-index: 1; }
#Mainvisual .txt p::after,#Mainvisual > p::after { content: ""; display: block; width: 1px; height: 5px; transform: rotate(35deg); position: absolute; bottom: -2px; left: 0; margin: auto; box-sizing: border-box; background: #606060; animation: show 3s ease 0s infinite normal; }
#Mainvisual > p { display: none; }

#Nav { max-width: 960px; width: 90%; margin: auto; display: flex; justify-content: space-around; margin-top: 165px; }
#Nav li { width: 430px; height: 110px; font-size: 2.000em; font-weight: 600; position: relative; }
#Nav li.buy a { color: #FFF; height: 100%; display: flex; align-items: center; padding: 0 45px; backface-visibility: hidden; }
#Nav li.buy a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; background: #00971c; }
#Nav li.buy a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #363130; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
#Nav li.buy a:hover { color: #FFF; }
#Nav li.buy a:hover::before { transform-origin: left top; transform: scale(1, 1); color: #FFF; }
#Nav li.buy a svg { width: 30px; fill: #FFF; margin-left: 10px; }
#Nav li.sell a { color: #FFF; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 35px 0 45px; }
#Nav li.sell a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; background: #363130; }
#Nav li.sell a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #00971c; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
#Nav li.sell a:hover { color: #FFF; }
#Nav li.sell a:hover::before { transform-origin: left top; transform: scale(1, 1); color: #FFF; }
#Nav li.sell svg { fill: none; stroke: #FFF; stroke-linejoin: round; width: 88px; }

#News { max-width: 1200px; width: 95%; margin: 165px auto 0 auto; }
#News h2 { width: 100%; font-family: 'Oswald', sans-serif; letter-spacing: 0.15em; font-size: 2.813em; display: flex; justify-content: space-between; align-items: center; }
#News h2 a { font-size: 1.125rem; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0; color: #363130; }
#News h2 a svg { fill: none; stroke: #363130; stroke-linejoin: round; width: 88px; height: 5px; vertical-align: 0.3em; margin-left: 10px; }
#News ul { border-top: 1px solid #606060; margin-top: 20px; }
#News ul li { border-bottom: 1px solid #606060; padding-bottom: 20px; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }
#News ul li a { color: #363130; }
#News ul li .img { max-width: 287px; width: 24%; }
#News ul li .img img { width: 100%; }
#News ul li .txt { max-width: calc(100% - 300px); width: 72%; padding-right: 4%; box-sizing: border-box; position: relative; }
#News ul li .txt p { line-height: 2em; font-size: 1.250em; }
#News ul li .txt p strong { color: #00971c; }
#News ul li .txt::after { content: ""; position: absolute; right: 5px; top: 0; bottom: 0; margin: auto; display: block; width: 10px; height: 17px; background: url(../images/ic_arrow_right.svg) no-repeat center; }
#News ul li a:hover { color: #00971c; transition: .3s; }

#About { margin-top: 120px; position: relative; transform: translateX(100%); opacity: 0; visibility: hidden; }
#About.anime { animation: tobidashi 1s ease-out forwards; }
#About .bg { color: #FFF; font-size: 13.438em; font-family: 'Oswald', sans-serif; right: 0; z-index: -1; letter-spacing: 0.08em; margin-right: -0.08em; text-shadow: 1px 1px 0 #dbe0de,-1px 1px 0 #dbe0de,1px -1px 0 #dbe0de,-1px -1px 0 #dbe0de; text-align: right; }
#About .inner { max-width: 1200px; margin: -45px auto 0 auto; }
#About h2 { font-size: 3.438em; font-weight: 600; line-height: 1.3em; text-align: center; }
#About p {text-align: center; margin-top: 70px; font-size: 1.250em; line-height: 2.2em; }

.btn { width: 330px; margin: 70px auto 0 auto; position: relative; }
.btn a { height: 70px; border: 1px solid #606060; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; color: #363130; font-size: 1.125em; }
.btn a svg { fill: none; stroke: #606060; stroke-linejoin: round; width: 88px; }
.btn a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #606060; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
.btn a:hover { color: #FFF; }
.btn a:hover::before { transform-origin: left top; transform: scale(1, 1); color: #FFF; }
.btn a svg { fill: none; stroke: #606060; stroke-linejoin: round; width: 88px; }
.btn a:hover svg { stroke: #FFF; }

#Works { margin-top: 290px; display: flex; justify-content: flex-start; position: relative; }
/*#Works.anime { animation: tobidashi02 1s ease-out forwards; }*/
#Works .left { background: #f0efed; width: 63.02%; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; position: relative; transform: translateX(-100%); opacity: 0; visibility: hidden; }
#Works.anime .left { animation: tobidashi02 1s ease-out forwards; }
#Works .left::before { content: ""; display: inline-block; width: 100%; height: 0; padding-top: 74%; width: 1px; }
#Works .txt { width: 39.5%; margin-right: 32%; position: relative; z-index: 5; box-sizing: border-box; }
#Works .bg { letter-spacing: 0.08em; font-size: 13.438em; font-family: 'Oswald', sans-serif; color: #FFF; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: -10px 0 0 auto; align-self: flex-start; }
#Works .txt h2 { font-size: 3.438em; font-weight: 600; }
#Works .txt p { line-height: 1.8em; font-size: 1.250em; margin-top: 35px; }
#Works .txt .img { margin-top: 55px; max-width: 473px; width: 100%; }
#Works .left > .img { width: 32%; margin-top: 9%; position: absolute; right: 0; top: 0; padding-right: 0; align-self: flex-start; text-align: left; box-sizing: border-box; transform: translateY(1%); opacity: 0; visibility: hidden; text-align: right; }
#Works.anime .left > .img { animation: img 1s 1.5s ease-out forwards; }
#Works .right { width: 36.98%; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
#Works .right .photo01,#Works .right .photo02,#Works .right .photo03 { transform: translateX(100%); opacity: 0; visibility: hidden; min-height: 0%;  }
#Works.anime .right .photo01 { animation: tobidashi 1s .5s ease-out forwards; }
#Works.anime .right .photo02 { animation: tobidashi 1s .8s ease-out forwards; }
#Works.anime .right .photo03 { animation: tobidashi 1s 1s ease-out forwards; }
br.sp { display: none; }

@keyframes arrow {
  0% { transform: translate3d(-50%, 0, 0); }
  60% { transform: translate3d(-50%, 88px, 0); }
  100% { transform: translate3d(-50%, 88px, 0); }
}

@keyframes show {
  0% { opacity: 0; }
  30% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes tobidashi {
	0% { transform: translateX(100%); opacity: 0; visibility: hidden; }
	100% { transform: translateX(0); opacity: 1; visibility: visible; }
}
@keyframes tobidashi02 {
	0% { transform: translateX(-100%); opacity: 0; visibility: hidden; }
	100% { transform: translateX(0); opacity: 1; visibility: visible; }
}

@keyframes img {
	0% { transform: translateY(1%); opacity: 0; visibility: hidden; }
	100% { transform: translateY(0%); opacity: 1; visibility: visible; }
}

@media screen and (max-width:1520px) {
	#Slide { width: 65%; padding: 49.6% 0 0 0; }
	#Mainvisual .txt { width: 32%;  padding-right: 7%; }
	#Mainvisual .txt p { margin-top: 30px; }
	
	#About .bg,#Works .bg { font-size: 14vw; }
	#Works .txt h2 { font-size: 3.5vw; font-weight: 600; }
	#Works .txt p { line-height: 1.8em; font-size: 1.2vw; margin-top: 35px; }
}


@media screen and (max-width:980px) {
	#Mainvisual { flex-wrap: wrap; }
	#Slide { width: 100%; padding: 0; position: relative; margin-top: 17%; }
	#Slide > ul { position: relative; width: 100%; }
	#Mainvisual .txt { width: 56%; margin-left: 10%; margin-top: 20px; margin-right: auto; box-sizing: border-box; position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
	#Mainvisual .txt p { display: none; }
	#Mainvisual > p { display: block; margin-top: 50px; }
	
	#Nav { margin-top: 50px; justify-content: center; }
	#Nav li { width: 250px; height: 250px; font-size: 1.250rem; margin: 0 25px; }
	#Nav li a { flex-direction: column; }
	#Nav li.buy a svg { width: 20px; margin-top: 10px; }
	#Nav li.sell a,#Nav li.buy a { justify-content: center; background: #00971c; padding: 0; }
	#Nav li.sell a { background: #363130; }
	#Nav li.sell a svg { margin-top: 15px; }
	#Nav li.buy a::after,#Nav li.sell a::after { display: none; }
	#Nav li.buy a::before,#Nav li.sell a::before { display: none; }
	#Nav li.buy a:hover,#Nav li.sell a:hover { color: #FFF; }	
	
	#News { margin: 111px auto 0 auto; }
	#News ul li .img { max-width: 35%; width: 35%; }
	#News ul li .txt { max-width: 61%; width: 61%; padding-right: 4%; box-sizing: border-box; position: relative; }
	#News ul li .txt p,#News h2 a { font-size: 1.000rem; }
	
	#About { margin-top: 60px; position: relative; }
	#About .bg,#Works .bg { font-size: 10.000em; line-height: 0.8em; }
	#About .inner { max-width: 1200px; margin: -15% auto 0 auto; }
	#About h2 { font-size: 2.500rem; }
	#About p { font-size: 1.125rem; margin-top: 35px; }
	
	.btn a::before { display: none; }
	.btn a:hover { color: #363130; }
	.btn a:hover svg { stroke: #606060; }
	
	#Works { margin-top: 114px; flex-wrap: wrap; }
	#Works .left::before { padding-top: 100%; width: 1px; }
	#Works .left { background: -webkit-linear-gradient(left, #f0efed 0%,#f0efed 72%,#ffffff 72%,#ffffff 72%,#ffffff 100%); background: linear-gradient(to right, #f0efed 0%,#f0efed 72%,#ffffff 72%,#ffffff 72%,#ffffff 100%); flex-wrap: wrap; width: 100%; justify-content: flex-start; padding-bottom: 100px; }
	#Works .bg { position: relative; margin-left: 50px;}
	#Works .txt { width: 70%; margin-right: auto; margin-left: auto; position: relative; z-index: 2; box-sizing: border-box; }
	#Works .txt .img { max-width: 366px; width: 100%; margin-left: 10%; margin-top: 75px; }
	#Works .txt h2 { font-size: 2.500rem; font-weight: 600; margin-top: 60px; }
	#Works .txt p { line-height: 1.8em; font-size: 1.120rem; margin-top: 25px; }
	#Works .left > .img { max-width: 368px; width: 51%; position: absolute; margin-right: 0; margin-top: 0; left: 0; top: 45%; }
	#Works .right { width: 90%; margin: -15% auto 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
	#Works .right .photo02,#Works .right .photo03 { margin-top: 10px; }

	br.sp { display: inline-block; }
}

@media screen and (max-width:600px) {
	#Nav ul { justify-content: space-around; }
	#Nav li { width: 45%; height: 0; padding-top: 45%; font-size: 1.000rem; position: relative; margin: 0 auto; }
	#Nav li a { position: absolute; top: 0; width: 100%; height: auto; }
	#Nav li.sell a svg { width: 44px; margin-top: 15px; }
	#Nav li.buy a svg { width: 14px; margin-top: 10px; }
	
	#News h2 { font-size: 1.875rem; }
	#News h2 a,#News ul li .txt p { font-size: 0.875rem; }
	#News h2 a svg { width: 44px; }
	#News ul { margin-top: 10px; }
	#News ul li .img { align-self: flex-start; margin-top: 10px; }
	
	#About .bg,#Works .bg { font-size: 5.500em; }
	#About h2,#Works .txt h2 { font-size: 2.000rem; }
	#About p { font-size: 1.000rem; }
	.btn a { height: 50px; padding: 0 20px; font-size: 0.938rem; }
	.btn { width: 220px; margin-top: 40px; }
	.btn a svg { width: 44px; }
	
	#Works .txt { width: 68%; }
	#Works .bg { margin-left: 25px; }
	#Works .txt p { font-size: 0.938rem; }
	#Works .left > .img { max-width: 368px; width: 51%; position: absolute; margin-right: 0; margin-top: 0; left: 0; top: 42%; }
	#Works .txt .img { max-width: 366px; width: 85%; margin-left: 12%; }
	
}