@charset "utf-8"; 

/* ===========================================================================================================================
	トップページ top css
	
	---- INDEX ----
	メインビジュアルスライダー
	テキストと写真のレイアウト
	内装・外装について／珈琲について／紅茶・ハーブティーについて／ワンちゃんのフードについてのタイトル
============================================================================================================================== */
/* メインビジュアルスライダー（パララックス）
------------------------------------------ */
.slider {
	width: 100%;
	position: sticky;
	top: 80px;/*ヘッダー分空ける*/
	left: 0;
	z-index: -1;
}
.slider ul {
	clear: both;
	width: 100%;
}
.slider ul li img{
	width: 100%;
}
@media screen and (min-width: 1000px) {/* PC */
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.slider {
		top: 80px;/*ヘッダー分空ける*/
	}
}
@media screen and (max-width: 767px) {/* SP */
	.slider {
		top: 60px;/*ヘッダー分空ける*/
	}
}

/* パララックス
------------------------------------------ */
.parallax {
	width: 100%;
	height: 50vh;
	position: sticky;
	top: 80px;/*ヘッダー分空ける*/
	left: 0;
	z-index: -1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.parallax {
		top: 80px;/*ヘッダー分空ける*/
		height: 50vh;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.parallax {
		top: 60px;/*ヘッダー分空ける*/
		height: 30vh;
	}
}
.parallax01 {
  background-image: url("../../img_top/visual04.jpg");
}
.parallax02 {
  background-image: url("../../img_top/visual03.jpg");
}
.parallax03 {
  background-image: url("../../img_top/visual12.jpg");
}

/* テキストと写真のレイアウト
------------------------------------------ */
@media screen and (min-width: 1000px) {/* PC */
	.col2 {
		display: flex;
		flex-wrap: wrap; /* 内包要素を折り返す（内包要素にwidth:を指定） */
		justify-content: space-between;/* 内包要素を両端に合わせて均等間隔に配置 */
	}
	.col2 .txt_box{
		width: calc((100% - 40px) / 2);
		margin-bottom: 40px;
		text-align: justify;
		text-justify: inter-character;
		font-size: 20px;
	}
	.col2 .img_box {
		width: calc((100% - 40px) / 2);
		margin-bottom: 40px;
	}
	.col2 .img_box_col2 {
		width: calc((100% - 40px) / 2);
		margin-bottom: 40px;
	}
	.col2 .img_box_col2 img {
		float: left;
		width: calc((100% - 6px) / 2);
		margin: 0 6px 6px 0;
	}
	.col2 .img_box_col2 img:nth-of-type(2n) {
		margin: 0 0 6px 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.col2 {
		display: flex;
		flex-wrap: wrap; /* 内包要素を折り返す（内包要素にwidth:を指定） */
		justify-content: space-between;/* 内包要素を両端に合わせて均等間隔に配置 */
	}
	.col2 .txt_box{
		width: calc((100% - 20px) / 2);
		margin-bottom: 20px;
		text-align: justify;
		text-justify: inter-character;
		font-size: 20px;
	}
	.col2 .img_box {
		width: calc((100% - 20px) / 2);
		margin-bottom: 20px;
	}
	.col2 .img_box_col2 {
		width: calc((100% - 20px) / 2);
		margin-bottom: 20px;
	}
	.col2 .img_box_col2 img {
		float: left;
		width: calc((100% - 6px) / 2);
		margin: 0 6px 6px 0;
	}
	.col2 .img_box_col2 img:nth-of-type(2n) {
		margin: 0 0 6px 0;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.col2 .txt_box{
		margin-bottom: 20px;
		text-align: justify;
		text-justify: inter-character;
		font-size: 17px;
	}
	.col2 .img_box {
		margin-bottom: 20px;
	}
	.col2 .img_box_col2 {
		width: 100%;
		margin-bottom: 20px;
	}
	.col2 .img_box_col2 img {
		float: left;
		width: calc((100% - 6px) / 2);
		margin: 0 6px 6px 0;
	}
	.col2 .img_box_col2 img:nth-of-type(2n) {
		margin: 0 0 6px 0;
	}
}

/* 内装・外装について／珈琲について／紅茶・ハーブティーについて／ワンちゃんのフードについてのタイトル
------------------------------------------ */
h2.about_facility {
	background: url("../../img/ttl_bg_flower.png") no-repeat;
}
h2.about_coffee {
	background: url("../../img/ttl_bg_bean.png") no-repeat;
}
h2.about_tea {
	background: url("../../img/ttl_bg_leaf.png") no-repeat;
}
h2.about_dogfood {
	background: url("../../img/ttl_bg_pad.png") no-repeat;
}
@media screen and (min-width: 1000px) {/* PC */
	h2.about_facility,h2.about_coffee,h2.about_tea,h2.about_dogfood {
		height: 60px;
		display: flex;
		align-items: center;/* 内包要素を上下センターに */
		padding: 0 0 0 50px;
		margin: 0 0 10px 0;
		font-size: 23px;
		font-weight: 600;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	h2.about_facility,h2.about_coffee,h2.about_tea,h2.about_dogfood {
		height: 60px;
		display: flex;
		align-items: center;/* 内包要素を上下センターに */
		padding: 0 0 0 50px;
		margin: 0 0 10px 0;
		font-size: 23px;
		font-weight: 600;
	}
}
@media screen and (max-width: 767px) {/* SP */
	h2.about_facility,h2.about_coffee,h2.about_tea,h2.about_dogfood {
		background-size: 30px 45px;
		height: 45px;
		display: flex;
		align-items: center;/* 内包要素を上下センターに */
		padding: 0 0 0 40px;
		margin: 0 0 10px 0;
		font-size: 20px;
		font-weight: 600;
	}
}