@charset "utf-8";

/*==================================================
機能編 4-1-5　ロゴアウトラインアニメーション
===================================*/

/* Loading背景画面設定　*/
#splash {
	/*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #48402e;
	text-align: center;
	color: #fef3e1;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
	width: 300px;
}

/*==================================================
　機能編 4-2-3 背景色が伸びる（右から左）
===================================*/


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg {
	display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
	display: block;
	content: "";
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	background-color: #48402e;
	/*伸びる背景色の設定*/
	animation-name: PageAnime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;

}

@keyframes PageAnime {
	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);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

#container {
	opacity: 0;
	/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
	animation-name: PageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
	fill-opacity: 0;
	/*最初は透過0で見えない状態*/
	transition: fill-opacity 0.5s;
	/*カラーがつく際のアニメーション0.5秒で変化*/
	fill: none;
	/*塗りがない状態*/
	stroke: #fef3e1;
	/*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
	fill: #fef3e1;
	/*塗りの色*/
	fill-opacity: 1;
	/*透過1で見える状態*/
	stroke: none;
	/*線の色なし*/
}


/*==================================================
 機能編 5-1-17 クリックしたら円形背景が拡大（下から）
===================================*/
/*========= ナビゲーションのためのCSS ===============*/
/* ボックス幅の最大値が990px */
@media screen and (max-width:990px) {

	/*アクティブになったエリア*/
	#g-nav.panelactive {
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		/*IE11対応のために今回は記述を削除
    position:fixed;
    z-index: 999;
	top: 0; */
		width: 100%;
		height: 100vh;
	}

	/*p209丸の拡大*/
	.circle-bg {
		position: fixed;
		z-index: 3;
		/*丸の形*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #48402e;
		/*丸のスタート位置と形状*/
		transform: scale(0);
		/*scaleをはじめは0に*/

		/* bottom:-50px;
    left:calc(50% - 50px); */
		/*50%から円の半径を引いた値*/

		top: calc(50% - 50px);
		left: calc(50% - 50px);
		transition: all 1s;
		/*1秒かけてアニメーション*/
	}

	.circle-bg.circleactive {
		transform: scale(50);
		/*クラスが付与されたらscaleを拡大*/
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav-list {
		display: none;
		/*はじめは表示なし*/
		/*ナビの数が増えた場合縦スクロール*/
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#g-nav.panelactive #g-nav-list {
		display: block;
		/*クラスが付与されたら出現*/
	}

	/*ナビゲーション*/
	#g-nav ul {
		opacity: 0;
		/*はじめは透過0*/
		/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
		position: absolute;
		z-index: 999;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -40%);
	}

	/*背景が出現後にナビゲーションを表示*/
	#g-nav.panelactive ul {
		opacity: 1;
	}

	/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
	#g-nav.panelactive ul li {
		animation-name: gnaviAnime;
		animation-duration: 1s;
		animation-delay: .2s;
		/*0.2 秒遅らせて出現*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

}

@keyframes gnaviAnime {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 以下考えて追加。fvの画像を変えたら高さが短くなったせいか
SNSアイコンが変な位置になったため、990px以下は表示なしに。 */
@media screen and (max-width:990px) {
	.sns-link {
		display: none;
	}
}

/* p207クリックしたら円形背景が拡大 */
/*========= ボタンのためのCSS ===============*/

.openbtn {
	display: none;
}

@media screen and (max-width:990px) {
	/*==================================================
　機能編 5-2-5 MENUが×に
===================================*/

	/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
	.openbtn {
		display: block;
		position: fixed;
		z-index: 9999;
		cursor: pointer;
		top: 10px;
		right: 10px;
		width: 55px;
		height: 55px;
		/* border:1px solid #fef3e1; */
		/* position: relative; これあると起点にいく*/
	}

	/*ボタン内側*/
	.openbtn span {
		display: inline-block;
		transition: all .4s;
		/*アニメーションの設定*/
		position: absolute;
	}

	.openbtn span:nth-of-type(1),
	.openbtn span:nth-of-type(3) {
		height: 1px;
		background: #48402e;
		width: 62%;
		left: 10px;
	}

	.openbtn span:nth-of-type(1) {
		top: 13px;
	}

	/* メニューって文字 */
	.openbtn span:nth-of-type(2) {
		top: 19px;
		left: 9px;
		font-size: 0.55rem;
		text-transform: uppercase;
		color: #48402e;
	}

	.openbtn span:nth-of-type(3) {
		top: 41px;
	}

	/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
	.openbtn.active span:nth-of-type(1) {
		top: 22px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
		/* color: #fef3e1; カラーじゃだめなのか！！！*/
		background: #fef3e1;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3) {
		top: 34px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
		/* color: #fef3e1; */
		background: #fef3e1;
	}

}


/*==================================================
 機能編 7-1-47	矢印が右に移動して背景がつく 
===================================*/

.btnarrow5 {
	/*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	border: 1px solid #48402e;
	padding: 8px 30px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #48402e;
	outline: none;
	/*アニメーションの指定*/
	transition: all .2s linear;
	font-size: 0.9rem;
}

.btnarrow5:hover {
	background: #48402e;
	color: #fef3e1;
}

/*矢印と下線の形状*/
.btnarrow5::before {
	content: "";
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top: 50%;
	right: -26px;
	/*下線の形状*/
	width: 40px;
	height: 1px;
	background: #48402e;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

.btnarrow5::after {
	content: "";
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 20%;
	right: -21px;
	/*矢印の形状*/
	width: 1px;
	height: 12px;
	background: #48402e;
	transform: skewX(45deg);
	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before {
	right: -30px;
}

.btnarrow5:hover::after {
	right: -25px;
}

/*===========================================================*/
/* 機能編 8-1-6　ページの指定の高さを超えたら出現し、フッター手前で止まる*/
/*===========================================================*/

/*リンクの形状*/
#page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	color: #6C6C6C;
	border: 1px solid #6C6C6C;
	transition: all 0.3s;
}

@media screen and (min-width:769px) {
	#page-top a:hover {
		background: #777;
	}
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
	cursor: pointer;
	/*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
	animation-delay: 0s;
}

@keyframes UpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*　下に下がる動き　*/

#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 1;
		transform: translateY(100px);
	}
}


/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
	text-align: center;
	margin: -50px 0 0 0;
	/*ドットの位置*/
}

.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}

.slick-dots button {
	color: transparent;
	outline: none;
	width: 8px;
	/*ドットボタンのサイズ*/
	height: 8px;
	/*ドットボタンのサイズ*/
	display: block;
	border-radius: 50%;
	background: #fef3e1;
	/*ドットボタンの色*/
}

.slick-dots .slick-active button {
	background: #48402e;
	/*ドットボタンの現在地表示の色*/
}

/*==================================================
 印象編 4 最低限おぼえておきたい動き
===================================*/

/* 4-6 じわっ（ぼかしから出現） */
.blur {
	animation-name: blurAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}

	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
	opacity: 0;
}




/* ここからカテゴリ別に画像を並べ替えるのCSS */
/*===========================================================*/
/* 機能編 5-3-1中心から外に線が伸びる（下部）*/
/*===========================================================*/

.sort-btn {
	display: flex;
	justify-content: center;
	margin: 50px 0;
	list-style: none;
	text-transform: uppercase;
}

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

.sort-btn li::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: -5px;
	left: 25%;
	/*線の形状*/
	width: 50%;
	height: 1px;
	background: #48402e;
	/*アニメーションの指定*/
	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: 375px) {
	.sort-btn {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sort-btn li {
		width: 48%;
		margin: 0 0 10px 0;
		text-align: center;
	}
}

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

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;
	/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
	display: block;
	position: absolute;
	width: 25%;
	/*横並びで3つ表示*/
	z-index: 1;
}

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

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

.item-content span {
	display: block;
	text-align: center;
	letter-spacing: 0.05em;
	padding: 10px 0 0 0;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	/*画像の下にできる余白を削除*/
	filter: drop-shadow(6px 6px 12px rgba(0, 0, 0, .3));
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
	.item {
		width: 49.5%;
		/*横並びで2つ表示*/
	}

	.item-content {
		padding: 10px;
	}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
	background: transparent !important;
}

.fancybox-thumbs__list a:before {
	border: 6px solid #FA999B;
}

.fancybox-caption__body {
	letter-spacing: 0.1em;
}