@charset "UTF-8";

html{
  font-size: 62.5%;
}

/*body全体の基本スタイル*/
body{
  background: #151515 url('../images/turu_neon.png') repeat-y fixed right bottom;
  background-size: 80%;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-family: Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/*widthとheightがborderまでに*/
*, *::before, *::after{
  box-sizing: border-box;
} 

/*その他*/
.heading{
  position: relative;
/*インラインブロックで線の長さが文字幅までにする*/
  display: inline-block; 
  margin: 30px 0 15px;
  padding-bottom: 15px;
  letter-spacing: 2px;
  font-size: 4rem;
}

/*下の二重線*/
.heading::before, .heading::after{
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid #999;
}

/*二重線の一つを上にずらす*/
.heading::before{
  bottom: 5px;
}

/*ここからheader*/
.header{
  background-color: #151515;
  opacity: 0.8;
}


.site-title-sub{
  margin-top: 0;
  letter-spacing: px;
  font-size: 2.2rem;
}

/*左右の直線*/
.site-title-sub::before, .site-title-sub::after{
  content: '';
  display: inline-block;
  width: 100px;
  height: 2px;
  margin: 0 17px;
  background-color: #fff;
  vertical-align: middle;
}

.site-title{
  margin-top: 36px;
  margin-bottom: 28px;
  font-size: 7.6rem;
}

.site-description{
  margin-bottom: 38px;
  color: #999999;
  font-size: 1.6rem;
}

.button{
  display: inline-block;
  width: 200px;
  padding: 20px;
  border-radius: 10px;
  background-color: #942626;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.4rem;
}

/*マウスオーバー時に色を変える*/
.button:hover{
  opacity: 0.9;
}

.title-wrapper{
  width:500px;
  margin-top: 118px;
  margin-bottom: 216px;
  margin-left: 5%;
}

/*ここからintroduction*/
.introduction{
  padding: 80px 30px;
  background-color: #fff;
  color: #333;
}

.intro-text{
  margin: 30px 0;
  line-height: 2.5;
}

/*ここからstop-motion*/
.stop-motion{
  padding: 80px 0 80px;
  background-color: #990000;
}

.video{
  display: block;
  width: 70%;
  margin: 50px auto 0;
}

/*ここからfoucus*/
.focus{
  padding: 80px 0;
  background-color: #fff;
  color: #333;
}

.focus-wrapper{
  display: table;
  width: 80%;
  margin: 50px auto 0;  /*左右をautoで親要素に対して中央寄せに*/
  table-layout: fixed;
}

.focus-box{
  display: table-cell; /*横並びに*/
}

.focus-title{
  margin: 0 20px 20px;
  font-size: 2rem;
}

.focus-text{
  margin: 0 20px;
  line-height: 2;
}

.focus-image{
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
}

/*ここからgallery*/
.gallery{
  padding: 80px 0;
}

.gallery-wrapper{
  display: table;
  width: 100%;
  margin-top: 60px;
  table-layout: fixed;   /*要素の横幅を均等に*/
}

.gallery-box{
  position: relative;
  display: table-cell;
}

/*画像拡大モーション*/
.gallery-box img{
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.gallery-box:nth-of-type(odd) img{
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

.gallery-box:nth-of-type(even) img{
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}

.gallery-box:hover img{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/*=============*/

.gallery-image{
  display: block;
  width: 100%;
  margin: 0 0 60%;  /*画像と同じサイズのスペースを下に確保*/
}

.gallery-description{
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;  /*テキストを上に*/
  width: 100%;
  height: 50%;
  overflow-y: auto;  /*テキストのスクロールバー*/
  padding: 20px;
}


/*.gallery-text中央寄せするための箱*/
.gallery-description-inner{
  display: table;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.gallery-text{
  display: table-cell;
  vertical-align: middle;  /*テキストの中央寄せ*/
  font-size: 1.2rem;
  line-height: 2;
}

/*反転画像*/
.gallery-box::after{
  /*擬似要素を配置*/
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  /*背景画像を表示*/
  background: no-repeat;
  background-size: 100% 100%;
  opacity: 0.2;
  transform: scaleY(-1);
}

/*反転画像の指定*/
.gallery-box.jan::after{
  background-image: url('../images/jan_pine01.jpg');
}

.gallery-box.feb::after{
  background-image: url('../images/feb_plum01.jpg');
}

.gallery-box.mar::after{
  background-image: url('../images/mar_cherry01.jpg');
}

.gallery-box.apr::after{
  background-image: url('../images/apr_wisteria01.jpg');
}

/*奇数番目の画像を下にする*/
.gallery-box:nth-child(odd) .gallery-image{
  margin: 60% 0 0;
}

/*奇数番目のテキストと反転画像を上に*/
.gallery-box:nth-child(odd) .gallery-description,
.gallery-box:nth-child(odd)::after{
  top: 0;
}

/*ここからinformation*/
.information{
  padding: 80px 0 130px;
  background-color: #fff;
  color: #333;
}

.information-wrapper{
  margin: 50px 0 0;
}

.information-image{
  width: 360px;
}

dl{
  display: inline-block;
  text-align: left; 
  line-height: 30px;
  width: 260px;
  margin-left: 73px;
  vertical-align: top;
}

dt{
  float: left;
  font-weight: 600;
}

dd{
  margin-left: 80px;
  width: 180px;
}

/*ここからfooter*/
.footer{
  padding: 10px 0;
  font-size: 1.3rem;
}

/*ここからレスポンシブデザイン*/
@media (max-width: 768px){
  body{
    font-size: 1.3rem;
    background-image:none;
  }
  
/*その他*/
  .heading{
    font-size: 2.5rem;
  }
  
/*ここからintroduction*/
  .intro-text{
    line-height: 2;
  }
  
/*ここからfocus*/
  .focus-wrapper,.focus-box{
    display: block; /*横並びを解除*/
  }
  
  .focus-image{
    width: 120px;
    height: 120px;
  }
  
  .focus-box{
    margin: 40px auto;
  }
  
  .focus-text{
    margin: 0;
  }
  
/*ここからgallery*/
  .gallery-wrapper,.gallery-box{
    display: block;
  }

  /*偶数番目の画像を下にする*/
.gallery-box:nth-child(even) .gallery-image{
  margin: 60% 0 0;
}

/*偶数番目のテキストと反転画像を上に*/
.gallery-box:nth-child(even) .gallery-description,
.gallery-box:nth-child(even)::after{
  top: 0;
}
  
/*画像拡大モーション*/
  .gallery-box{
  overflow: hidden;
}
   
  .gallery-box:nth-of-type(odd) img{
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
  
/*ここからheader*/
.title-wrapper{
    width: 300px;
    margin-left:auto;
    margin-right:auto;
}
  
  .site-title{
    font-size: 6.5rem;
  }
  
  .site-title-sub::before, .site-title-sub::after{
    display: block;
    width: 80%;
    margin: 10px auto;
  }

  .site-title-sub{
    font-size: 1.9rem;
  }
  
/*ここからinformation*/
  .information-image{
    width: 300px;
  }
}

/*topスクロールボタン*/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
 
 
#pageTop a {
  display: block;
  z-index: 999;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  background-color: #999;
  color: #fff;
  text-decoration: none;
  line-height: 38px;
  
}
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}