@charset "utf-8";

#contents > #what-we-do {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	width:1080px; margin:0 -70px;}
#contents > #what-we-do > header {-webkit-flex:1 1 100%; flex:1 1 100%;}
#contents > #what-we-do > section {width:300px; position:relative; margin:50px 0 0 90px; font-size:1.4rem; text-align:center;}
#contents > #what-we-do > header + section {margin-left:0;}
#contents > #what-we-do > section > .thumbnail {position:relative;}
#contents > #what-we-do > section > .thumbnail > img {display:block;}
#contents > #what-we-do > section > h1 {margin:0.7em 0 0; font-size:3.4rem; line-height:1;}
#contents > #what-we-do > section > small {display:block; margin:0.3em 0 0; color:#b8b8b8; font-weight:bold; font-family:brandon-grotesque,sans-serif; letter-spacing:0.1em; line-height:1;}
#contents > #what-we-do > section > p {margin:1em 0 0; text-align:left;}
#contents > #what-we-do > section > .image {display:none;}

html.fac-js-enabled #contents > #what-we-do > section {cursor:pointer;}
html.fac-js-enabled #contents > #what-we-do > section > .thumbnail::after {
	display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; background:#000; opacity:0; transition:opacity 0.5s ease-in-out;}
html.fac-js-enabled #contents > #what-we-do > section > p {position:relative;}
html.fac-js-enabled #contents > #what-we-do > section > p::after {
	display:block; content:""; width:0; height:0; position:absolute; left:50%; bottom:-50px; transform:translateX(-50%); 
	border:20px solid transparent; border-bottom:0 solid #f6f6f8; overflow:hidden; transition:border-width 0.2s ease-in-out;}
html.fac-js-enabled #contents > #what-we-do > section > .image {
	display:block; width:1080px; height:0; margin:50px calc(50% - 50vw) 0; padding:0 calc(50vw - 50%); background:#f6f6f8; overflow:hidden; cursor:default; 
	transition:0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition-property:height,margin-bottom;}
html.fac-js-enabled #contents > #what-we-do > section > .image::before, 
html.fac-js-enabled #contents > #what-we-do > section > .image::after  {display:block; content:""; clear:both; height:40px;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul {
	display:-webkit-flex; display:flex; 
	margin:0 0 0 -40px; animation-duration:50s;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul > li {margin:0 0 0 40px;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul > li > img {display:block; width:auto; height:427px;}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+1) > .image {}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+2) > .image {margin-left:calc(50% - 50vw + (300px + 90px) * -1);}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+3) > .image {margin-left:calc(50% - 50vw + (300px + 90px) * -2);}
html.fac-js-enabled #contents > #what-we-do > section.selected {z-index:2;}
html.fac-js-enabled #contents > #what-we-do > section.selected > p::after {border-bottom-width:20px; transition-delay:0.3s;}
html.fac-js-enabled #contents > #what-we-do > section.selected > .image {height:auto; z-index:2; margin-bottom:50px;}
html.fac-js-enabled #contents > #what-we-do > section.selected             > .thumbnail::after, 
html.fac-js-enabled #contents > #what-we-do > section:not(.selected):hover > .thumbnail::after {opacity:0.3;}

@media screen and (max-width:599px) {

#contents > #what-we-do {display:block; width:auto; margin:0;}
#contents > #what-we-do > header {}
#contents > #what-we-do > section {width:auto; margin:6.6666vw 0 0; font-size:1.2rem;}
#contents > #what-we-do > header + section {margin-top:0;}
#contents > #what-we-do > section > .thumbnail {width:80%; margin:0 auto;}
#contents > #what-we-do > section > .thumbnail > img {width:100%; height:auto;}
#contents > #what-we-do > section > h1 {font-size:2.8rem;}
#contents > #what-we-do > section > small {}
#contents > #what-we-do > section > p {}
#contents > #what-we-do > section > .image {}

html.fac-js-enabled #contents > #what-we-do > section {}
html.fac-js-enabled #contents > #what-we-do > section > p {}
html.fac-js-enabled #contents > #what-we-do > section > p::after {
	display:block; content:""; width:0; height:0; position:absolute; left:50%; bottom:-50px; transform:translateX(-50%); 
	border:20px solid transparent; border-bottom:0 solid #f6f6f8; overflow:hidden; transition:border-width 0.2s ease-in-out;}
html.fac-js-enabled #contents > #what-we-do > section > .image {width:100%; margin:10vw -30px 0; padding:0 30px;}
html.fac-js-enabled #contents > #what-we-do > section > .image::before, 
html.fac-js-enabled #contents > #what-we-do > section > .image::after  {height:6.6666vw;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul {margin:0 0 0 -5vw; animation-duration:30s;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul > li {margin:0 0 0 5vw;}
html.fac-js-enabled #contents > #what-we-do > section > .image > ul > li > img {height:50vw;}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+1) > .image {}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+2) > .image {margin-left:-30px;}
html.fac-js-enabled #contents > #what-we-do > section:nth-of-type(3n+3) > .image {margin-left:-30px;}
html.fac-js-enabled #contents > #what-we-do > section.selected {}
html.fac-js-enabled #contents > #what-we-do > section.selected > p::after {border-bottom-width:20px; transition-delay:0.3s;}
html.fac-js-enabled #contents > #what-we-do > section.selected > .image {height:auto; z-index:2; margin-bottom:50px;}
html.fac-js-enabled #contents > #what-we-do > section:hover {}

}