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

/*===========================================================*/
/* 機能編 5-3-1中心から外に線が伸びる（下部）*/
/*===========================================================*/


.sort-btn{
/*	display: flex;*/
	justify-content: center;
	margin:10px 0;
	list-style: none;
  line-height: 2.2em;
  /*text-transform: uppercase;*/
  letter-spacing: 0.5px;
}

.sort-btn li{
	position: relative;
    cursor: pointer;
    margin: 0;
}

.sort-btn li::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:3px;
    left: -1%;
    /*線の形状*/
    width: 30%;
    height: 1.5px;
    background:#000;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.sort-btn li.active::after,
.sort-btn li:hover::after{
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*横幅が375px以下になった際の指定*/
@media only screen and (max-width: 414px) {
.sort-btn{
  flex-wrap: wrap;
	justify-content: space-between;
}
	
.sort-btn li{
	margin:0 0 10px 0;
	}
.sort-btn li::after {
  width: 18%;
  bottom:-1px;
}
}



/*===========================================================*/
/* 機能編 6-2-2 カテゴリ別に画像を並び替える*/
/*===========================================================*/

/*＝＝＝Muuriのレイアウトのための調整 */
#gallery{
  margin-left: 18%;
}

.grid{
  position: relative;/*並び替えの基準点を指定*/
  display: flex;
	justify-content:space-between;
  box-sizing:border-box;
  flex-wrap: wrap; /* 折り返しを許可 */
  align-items: stretch; /* 子要素の高さを最大に合わせる（デフォルト） */
}

/*各画像の横幅などの設定*/
.item{ 
  display: flex; 
  /*flex-direction: column;*/
  box-sizing:border-box;
  position:absolute;
  width: 32%;/*横並びで3つ表示*/
  height:auto;
  z-index: 1;
  list-style:none;
  padding: 0 4% 3%;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position:relative;
  width: 100%;
  height: 100%;
  padding:0;
  flex-grow:1;
  box-sizing:border-box;
  margin-bottom: 30px;
}

.item-content .img-box img{
  display:flex;
/*  justify-content:center;*/
}

.item-content a{
  text-decoration: none;
}

.item-content span{
  display: block;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 0.05em;
  padding: 10px 0 0 0;
  flex-grow: 1;
}

.siteurl{
  display: block;
  text-align:center;
  font-size: 0.8rem;
  flex-grow:1;
}
.siteurl:hover{
  color:#DF79A7;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

.item-content .f_small{
  font-size: 0.8em;
  padding-top: 0.6em;
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 980px) {
.item {
  width: 40%;/*横並びで2つ表示*/
  margin: 0 3%;
}
.item-content {
  margin: 5% 10px 20%;
}
}
@media only screen and (max-width: 667px) {
#gallery{
  margin-left: 0%;
}
.item {
  width: 45%;/*横並びで2つ表示*/
  margin: 0 2%;
}
.item-content {
  margin: 5% 5px 20% 0;
}  
.siteurl{
  font-size: 0.7rem;   
}
}
@media only screen and (max-width: 414px) {
#gallery{
  margin-left: 0%;
}
.item {
  width: 90%;/*横並びで2つ表示*/
}
.item-content {
  padding: 5% 5% 5% 15%;
}

}



/*===========================================================*/
/*  印象編　7-1　画像が拡大*/
/*===========================================================*/

.img-box,
.img_01,
.img_02,
.img_03{
  overflow: hidden;
  border: 0.5px solid #ccc;
}

.grid img,
.img_01 img,
.img_02 img,
.img_03 img{
	transform: scale(1);
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.grid a:hover img,
.img_01 a:hover img,
.img_02 a:hover img,
.img_03 a:hover img{/*hoverした時の変化*/
	transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}



/*========= 背景色の動きのCSS ===============*/
.bgextend{
	width: 100%;
	padding: 20px;
	/*margin:0 0 20px 0;*/
	box-sizing:border-box;
}

/*印象編　4-9、4-10　背景色が伸びて出現（左から・右から）　*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*--------- 右から --------*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　
.bgappearTrigger,
.bgRLextendTrigger{
    opacity: 0;
}
*/