@charset "UTF-8" ;

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1200px) {

.container {
    width: 100%;
    /* background-color: bisque; */
}
.header {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: rgba(245, 245, 220, 0.788);
}
.header1 {
    width: 30%;
    /* background-color: mediumspringgreen; */
}
.header1 img {
    width: 70%;
}
.header2 {
    width: 40%;
    /* background-color: magenta; */
}
.header2 {
    font-size: 20px;
}
.header3 {
    width: 30%;
/}
/* ここからボタン */
.btn,
a.btn,
button.btn {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
/* ボタンのベース */
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb620090;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}
/* ここまでボタン */
.top {
    width: 100%;
    /* background-color: mediumturquoise; */
}
/* ここからslider */

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0px;/*スライド左右の余白調整*/
}


/*========= レイアウトのためのCSS ===============*/

.slider ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/* ここまでslider */

.main {
    width: 100%;
    padding-top: 150px;
}
.main h2 {
    font-size: 35px;
    text-align: center;
}
.about {
    width: 100%;
    height: 540px;
    display: flex;
    padding-top: 50px;
    /* background-color: palevioletred; */
}
.about1 {
    width: 50%;
    /* background-color: palegreen; */
}
.about1 img {
    width: 100%;
}
.about2 {
    width: 50%;
    /* background-color: orange; */
}
.about2 p {
    font-size: 25px;
    padding-top: 100px ;
    padding-left: 110px;
}
.pet {
    width: 100%;
    padding-top: 150px;
    /* background-color: yellow; */
}
.pet h2 {
    font-size: 35px;
    padding-bottom: 25px;
    text-align: center;
}
.gallery {
    width: 90%;
    margin: 0 auto;
    /* background-color: blueviolet; */
}


/* ここからgallery */

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
	background: #ffffff;
	padding: 20px;
	margin:50px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sort-btn dt{
	font-weight: bold;
	margin:0 0 10px 0;
}

.sort-btn dd{
	margin:0 0 10px 0;
}

.sort-btn ul{
	display: flex;
	flex-wrap: wrap;
}

.sort-btn li{
	margin:0 10px;
}

.sort-btn ul li{
	position: relative;
	cursor: pointer;
	padding:0 0 0 30px;
	margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
	width:100%;
	margin:0;
}
	
.sort-btn ul li{
	width:auto;
}
	
}

/*チェックマークの設定*/
.sort-btn ul li::before{
	content:'';
	position: absolute;
	left:0;
	width:20px;
	height:20px;
	border:2px solid #ccc;
}

.sort-btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
	content:'';
	position: absolute;
	left:5px;	
	top:0;
    /*チェックマークの色や形*/
	border-left:2px solid #333;
	border-bottom:2px solid #333;
	width:16px;
	height:9px;
	transform:rotate(-45deg);
}



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

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  padding:30px 5px 30px 20px;/*画像に余白をつける*/
  /* padding:0 5px 10px 5px;画像に余白をつける */
  z-index: 1;
}

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

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

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


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

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

/*========= レイアウトのためのCSS ===============*/
.gallery ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .gallery a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
} */


/* ここまでgallery */

.contact {
    width: 100%;
    text-align: center;
    padding-top: 200px;
    /* background-color: salmon; */
}
.contact h2 {
    font-size: 35px;
    padding-bottom: 20px;
}
/* .contact1 {
    background-color: seagreen;
} */
.footer {
    width: 100%;
    height: 200px;
    text-align: center;
    padding-top: 130px;
    /* background-color: hotpink; */
}

}
























/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:600px) and (max-width:1199px) {


.container {
    width: 100%;
    /* background-color: bisque; */
}
.header {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: rgba(245, 245, 220, 0.788);
}
.header1 {
    width: 30%;
    /* background-color: mediumspringgreen; */
}
.header1 img {
    width: 70%;
}
.header2 {
    width: 40%;
    /* background-color: magenta; */
}
.header2 {
    font-size: 20px;
}
.header3 {
    width: 30%;
/}
/* ここからボタン */
.btn,
a.btn,
button.btn {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
/* ボタンのベース */
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb620090;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}
/* ここまでボタン */
.top {
    width: 100%;
    /* background-color: mediumturquoise; */
}
/* ここからslider */

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0px;/*スライド左右の余白調整*/
}


/*========= レイアウトのためのCSS ===============*/

.slider ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/* ここまでslider */

.main {
    width: 100%;
    padding-top: 150px;
}
.main h2 {
    font-size: 35px;
    text-align: center;
}
.about {
    width: 100%;
    height: 540px;
    display: flex;
    padding-top: 50px;
    /* background-color: palevioletred; */
}
.about1 {
    width: 50%;
    /* background-color: palegreen; */
}
.about1 img {
    width: 100%;
}
.about2 {
    width: 50%;
    /* background-color: orange; */
}
.about2 p {
    font-size: 25px;
    padding-top: 100px ;
    padding-left: 110px;
}
.pet {
    width: 100%;
    padding-top: 150px;
    /* background-color: yellow; */
}
.pet h2 {
    font-size: 35px;
    padding-bottom: 25px;
    text-align: center;
}
.gallery {
    width: 90%;
    margin: 0 auto;
    /* background-color: blueviolet; */
}


/* ここからgallery */

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
	background: #ffffff;
	padding: 20px;
	margin:50px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sort-btn dt{
	font-weight: bold;
	margin:0 0 10px 0;
}

.sort-btn dd{
	margin:0 0 10px 0;
}

.sort-btn ul{
	display: flex;
	flex-wrap: wrap;
}

.sort-btn li{
	margin:0 10px;
}

.sort-btn ul li{
	position: relative;
	cursor: pointer;
	padding:0 0 0 30px;
	margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
	width:100%;
	margin:0;
}
	
.sort-btn ul li{
	width:auto;
}
	
}

/*チェックマークの設定*/
.sort-btn ul li::before{
	content:'';
	position: absolute;
	left:0;
	width:20px;
	height:20px;
	border:2px solid #ccc;
}

.sort-btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
	content:'';
	position: absolute;
	left:5px;	
	top:0;
    /*チェックマークの色や形*/
	border-left:2px solid #333;
	border-bottom:2px solid #333;
	width:16px;
	height:9px;
	transform:rotate(-45deg);
}



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

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  padding:30px 5px 30px 20px;/*画像に余白をつける*/
  /* padding:0 5px 10px 5px;画像に余白をつける */
  z-index: 1;
}

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

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

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


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

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

/*========= レイアウトのためのCSS ===============*/
.gallery ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .gallery a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
} */


/* ここまでgallery */

.contact {
    width: 100%;
    text-align: center;
    padding-top: 200px;
    /* background-color: salmon; */
}
.contact h2 {
    font-size: 35px;
    padding-bottom: 20px;
}
/* .contact1 {
    background-color: seagreen;
} */
.footer {
    width: 100%;
    height: 200px;
    text-align: center;
    padding-top: 130px;
    /* background-color: hotpink; */
}

}






























/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 599px) {

.container {
    width: 100%;
    /* background-color: bisque; */
}
.header {
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    background-color: rgba(245, 245, 220, 0.788);
}
.header1 {
    width: 30%;
    /* background-color: mediumspringgreen; */
}
.header1 img {
    width: 70%;
}
.header2 {
    width: 40%;
    /* background-color: magenta; */
}
.header2 h2 {
    font-size: 0.6rem;
}
.header3 {
    width: 30%;
/}
/* ここからボタン */
.btn,
a.btn,
button.btn {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  padding: 4px 8px;  /* 小さめに */
    font-size: 0.4rem;    /* 文字も小さめに */
    border-radius: 6px; /* 角丸も少し控えめにすると自然 */
}
/* ボタンのベース */
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb620090;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn--radius {
   border-radius: 100vh;
}
/* ここまでボタン */
.top {
    width: 100%;
    /* background-color: mediumturquoise; */
}
/* ここからslider */

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0px;/*スライド左右の余白調整*/
}


/*========= レイアウトのためのCSS ===============*/

.slider ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/* ここまでslider */

.main {
    width: 100%;
    padding-top: 150px;
}
.main h2 {
    font-size: 1rem;
    text-align: center;
}
.about {
    width: 100%;
    /* display: flex; */
    padding-top: 25px;
    /* background-color: palevioletred; */
}
.about1 {
    width: 100%;
    /* background-color: palegreen; */
}
.about1 img {
    width: 100%;
}
.about2 {
    width: 100%;
    /* background-color: orange; */
}
.about2 p {
    font-size: 0.7rem;
    text-align: center;
    padding-top: 50px ;
}
.pet {
    width: 100%;
    padding-top: 75px;
    /* background-color: yellow; */
}
.pet h2 {
    font-size: 1rem;
    padding-bottom: 25px;
    text-align: center;
}
.gallery {
    width: 90%;
    margin: 0 auto;
    /* background-color: blueviolet; */
}


/* ここからgallery */

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
	background: #ffffff;
	padding: 20px;
	margin:50px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sort-btn dt{
	font-weight: bold;
	margin:0 0 10px 0;
}

.sort-btn dd{
	margin:0 0 10px 0;
}

.sort-btn ul{
	display: flex;
	flex-wrap: wrap;
}

.sort-btn li{
	margin:0 10px;
}

.sort-btn ul li{
	position: relative;
	cursor: pointer;
	padding:0 0 0 30px;
	margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
	width:100%;
	margin:0;
}
	
.sort-btn ul li{
	width:auto;
}
	
}

/*チェックマークの設定*/
.sort-btn ul li::before{
	content:'';
	position: absolute;
	left:0;
	width:20px;
	height:20px;
	border:2px solid #ccc;
}

.sort-btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
	content:'';
	position: absolute;
	left:5px;	
	top:0;
    /*チェックマークの色や形*/
	border-left:2px solid #333;
	border-bottom:2px solid #333;
	width:16px;
	height:9px;
	transform:rotate(-45deg);
}



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

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  padding:30px 5px 30px 20px;/*画像に余白をつける*/
  /* padding:0 5px 10px 5px;画像に余白をつける */
  z-index: 1;
}

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

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

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


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

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

/*========= レイアウトのためのCSS ===============*/
.gallery ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.gallery dt {
    font-size: 0.6rem;
}
.gallery li {
    font-size: 0.6rem;
}

/* .gallery a{
	color: #333;
}

a:hover,
a:active{
	text-decoration: none;
} */


/* ここまでgallery */

.contact {
    width: 100%;
    text-align: center;
    padding-top: 100px;
    /* background-color: salmon; */
}
.contact h2 {
    font-size: 1rem;
    padding-bottom: 20px;
}
/* .contact1 {
    background-color: seagreen;
} */
.footer {
    width: 100%;
    height: 100px;
    text-align: center;
    padding-top: 65px;
    /* background-color: hotpink; */
}

}