@charset "UTF-8";

/*-----------------------------------------------
  WEB FONTS
  -----------------------------------------------*/
@font-face {
  font-family: 'BFBonn';
  font-style: normal;
  font-weight: 400;
  src: local('BFBonn-Regular'), local('BFBonn-Regular'),
       url(https://verdy.s3-ap-northeast-1.amazonaws.com/assets/font/BFBonn-Regular.woff2) format('woff2'),
       url(https://verdy.s3-ap-northeast-1.amazonaws.com/assets/font/BFBonn-Regular.woff) format('woff');
  font-display: block;
}
@font-face {
  font-family: 'BFBonn';
  font-style: normal;
  font-weight: 700;
  src: local('BFBonn-Bold'), local('BFBonn-Bold'),
       url(https://verdy.s3-ap-northeast-1.amazonaws.com/assets/font/BFBonn-Bold.woff2) format('woff2'),
       url(https://verdy.s3-ap-northeast-1.amazonaws.com/assets/font/BFBonn-Bold.woff) format('woff');
  font-display: block;
}


/*-----------------------------------------------
  GENERIC
  -----------------------------------------------*/
html
{ font-size:62.5%; }
body
{ background-color:#fff;  font-family:benton-sans, '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;  font-weight:400;  color:#000;  line-height:1; }

img
{ width:100%;  height:auto;  vertical-align:bottom; }

header h1
{ position:fixed;  top:40px;  left:40px;  width:78px;  z-index:10; }
header .instagram
{ position:fixed;  top:40px;  right:40px;  width:28px;  z-index:11; }

main
{ margin:0 auto;  padding:100px 50px;  width:100%;  max-width:1100px; }
main h2
{ margin:0 0 70px;  font-family:BFBonn, san-serif;  font-size:2.8rem;  line-height:1;  font-weight:400;  letter-spacing:0.2rem;  text-align:center; }
main ul li
{ position:relative;  list-style:none;  opacity:0;  -webkit-transition:.8s opacity linear .2s;  transition:.8s opacity linear .2s; }
main ul li::after
{ content:'';  position:absolute;  top:0;  bottom:0;  display:block;  width:100%;  background-color:#fff;  -webkit-transition:.8s width ease-in-out .2s;  transition:.8s width ease-in-out .2s; }
main ul li:nth-child(odd)::after
{ right:0;  }
main ul li:nth-child(even)::after
{ left:0; }
main ul li + li
{ margin:80px 0 0; }
main ul li.fadeIn
{ opacity:1; }
main ul li.fadeIn::after
{ width:0; }

footer
{ padding:0 0 20px;  display:block;  width:100%;  text-align:center; }
footer small
{ font-size:1.0rem; }
footer small a
{ padding:2px 3px 1px;  background-color:rgba(0, 0, 0, 0.06);  color:#000; text-decoration:none;  border-radius:2px;  -webkit-transition:.2s background-color linear;  transition:.2s background-color linear; }
footer small a:hover
{ background-color:rgba(0, 0, 0, 0.12); }

@media only screen and (max-width: 768px) {
	a
	{ -webkit-tap-highlight-color:rgba(0,0,0,0.02); }
    
    header h1
    { top:20px;  left:15px;  width:56px; }
    header .instagram
    { top:20px;  right:15px;  width:26px; }

    main
    { padding:80px 15px; }
    main h2
    { margin:0 0 40px;  font-size:2.1rem; }
    main ul li + li
    { margin:15px 0 0; }

    footer p
    { margin:0 0 15px; }
}