@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

* {
   box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
   margin: 0;
   padding: 0;
   font-family: Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica,  sans-serif;
   background-color: #F9F9F9;
   letter-spacing : 0.2em;
   font-size: 0.9rem;
}

#header {
   padding: 16px;
   position: fixed;  /* 位置を固定する */
   top: 0;  /* 固定する位置を指定 */
   width: 100%;  /* ヘッダーの幅 */
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 auto;
   background-color: #fff;
   z-index: 500;
}

#header ul {
   display: flex;
}

#header li {
   margin-left: 16px;
}

#header li :last-child {
   margin-right: 16px;
}

#header li a{
   color: #4c4c4c;
}

#header li a:hover {
   opacity: 0.7;
}

h1 {
   margin: 0; 
   padding: 0;
   font-size: 20px;
}

a {	
   text-decoration: none;
   color: #fff;
}

img {
    max-width: 100%;
}

nav {
   margin: 0 0 0 auto;
}

ul {
   list-style: none;
   margin: 0;
   display: flex;
}

li {
   margin: 0 0 0 15px;
   font-size: 14px;
   list-style: none;
}


/*   class共通部分   */

.site-title {
    width: 70px;
    line-height: 1px;
    margin-left: 16px;
}

.site-title a {
    display: block;
}

.wrapper {
    margin: 0 auto 0px auto;
    padding: 0 8px;
    text-align: center;
}

.sp-nav {
   display: none;
}

/*   メインビジュアル   */

#mainvisual {
   margin-top: 52px;
   margin-bottom: 16px;
}

#mainvisual img {
   width: 100%;
   max-width: 1920px;
   height: 840px;   /*調整840px*/
   object-fit: cover;
}

 .scroll-downs {
   position: absolute;
   top: 600px;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   
   width :34px;
   height: 55px;
 }
 .mousey {
   width: 3px;
   padding: 10px 15px;
   height: 35px;
   border: 2px solid #fff;
   border-radius: 25px;
   opacity: 0.75;
   box-sizing: content-box;
 }
 .scroller {
   width: 3px;
   height: 10px;
   border-radius: 25%;
   background-color: #fff;
   animation-name: scroll;
   animation-duration: 2.2s;
   animation-timing-function: cubic-bezier(.15,.41,.69,.94);
   animation-iteration-count: infinite;
 }
 @keyframes scroll {
   0% { opacity: 0; }
   10% { transform: translateY(0); opacity: 1; }
   100% { transform: translateY(15px); opacity: 0;}
 }

x/*   WORKS   */

*, *:before, *:after {
   box-sizing: border-box;
}
.flex {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}
.flex > *{
   width: calc( 20% - 25px );
   margin-right: 25px;
   margin-bottom: 30px;
}
.flex > *:nth-child(5n){
   margin-right: auto;
}

.sample1 {
  overflow:		hidden;
  margin:			10px 8px 10px 16px;
  position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
  font-size:		130%;
   font-weight: bold;
  text-align: 		center;
  padding-top:		40px;
  color:			#fff;
}
.sample1 .mask {
  width:			100%;
  height:		98%;
  position:		absolute;	/* 絶対位置指定 */
  top:			0;
  left:			0;
  opacity:		0;	/* マスクを表示しない */
  background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
  -webkit-transition:	all 0.2s ease;
  transition:		all 0.2s ease;
}
.sample1 .mask p {
   font-size: 1rem;
   padding-top: 10px;
   color: #fff;
}
.sample1:hover .mask {
  opacity:		1;	/* マスクを表示する */
}

/*   footer   */

#footer {
   font-size: 0.75rem;
   padding: 30px 0 0 0;
   text-align: center;
   height: 70px;
   background-color: #24292e;
 }

#footer {
   color: #fff;
}

/*   responsive   */

@media screen and (max-width: 960px) {
   .sample1 .caption {
      font-size: 100%;
      padding-top:		30px;
  }
  .sample1 .mask {
      height:			96%;
  }
  .sample1 .mask p {
      font-size: 0rem;
  }
  .flex > *{
      width: calc( 25% - 25px );
      margin-right: 12px;
      margin-bottom: 12px;
  }
  .flex > *:nth-child(5n){
      margin-right: 12px;
  }
  .flex > *:nth-child(4n){
      margin-right: auto;
  }
}


@media screen and (max-width: 580px) {
   #mainvisual {
      margin-top: 58px;
  }
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(255, 255, 255, .8);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #111;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #111;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #111;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #111;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #111;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #111;
      transform: rotate( -45deg );
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }

   .sample1 .caption {
      font-size: 80%;
      text-align: center;
  }
  .sample1 .mask {
      height:			95%;
  }
  .sample1 .mask p {
      font-size: 0rem;
  }
  .flex > *{
      width: calc( 33.33333% - 27px ) ;
  }
  .flex > *:nth-child(5n){
      margin-right: 12px;
  }
  .flex > *:nth-child(4n){
      margin-right: 12px;
  }
  .flex > *:nth-child(3n){
      margin-right: auto;
  }
}