/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:0px 20px;
}



.sort-btn li{
	color:#fafafa;
	list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
	width:15%;
	text-align:center;
	letter-spacing: 2px; 
	background: #474747;
	box-shadow: 0 0 10px  #ffd700;
	transition: all 0.3s ease;
	border: 2px solid #ffd700;
}



.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background: #e3b0ca;
	box-shadow: 0 0 10px  #C39000;
	transition: all 0.3s ease;
	color:#fafafa;
	border: 2px solid #ffd700;
}

	
/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	letter-spacing: 0.12px; 
	}	
}



@media (min-width: 768px) {
.sort-btnbottom{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}



.sort-btnbottom li{
	color:#fafafa;
	list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
	width:15%;
	text-align:center;
	letter-spacing: 2px; 
	background: #474747;
	box-shadow: 0 0 10px  #ffd700;
	transition: all 0.3s ease;
	border: 2px solid #ffd700;
}



.sort-btnbottom li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background: #e3b0ca;
	box-shadow: 0 0 10px  #C39000;
	transition: all 0.3s ease;
	color:#fafafa;
	border: 2px solid #ffd700;
}

    .sp{
        display: none !important;
    }
}



/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btnbottom{
	justify-content: space-between;
}
	
.sort-btnbottom li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	letter-spacing: 0.12px; 
	}	
}

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

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


/*内側のボックスの高さが崩れないように維持*/
.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: 47%;/*横並びで2つ表示*/
  margin: 1%;
}
}


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

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}
/*　画像の拡大　*/

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

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}			


/*＝＝＝スマホで予約ボタンを常に表示させる*/
.footer_fixed{
	position:fixed;
	display:flex;
	width:100%;
	bottom:0;
	left:0;
	z-index:999;
}
.footer_fixed a{
	color: #fff;
	text-decoration: none;
}
.footer_instagram{
	width:50%;
	background:#3a6fff;
	text-align:center;
	padding:20px 0;
}

.footer_reservation{
	width:50%;
	background:#FF3A91;
	text-align:center;
	padding:20px 0;
}

@media(min-width:700px){
.footer_fixed{
	display: none;
}
}



/* アイコンのサイズ指定 */
.material-icons.openlink { font-size: 13px; }


/* アイコンの位置ずれ補正 */
.material-icons{
display: inline-flex;
vertical-align: middle;
}


/*全共通*/

.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;
}
}

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

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

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* --------アコーディオンのスタイル-------- */
summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: block;
}

summary::-webkit-details-marker {
  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  display: none;
}

.summary_inner{
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid #FF3A91;
  font-weight: none;
  color: #383838;
}

.icon {
  display: block;
  position: relative;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.4s;
}

/*details[open] .icon {*/
/*  transform: rotate(180deg);*/
/*}*/

/* is-openedクラスが付与されたときのスタイル */
details.is-opened .icon {
  transform: rotate(180deg);
}

/* アイコンのバーのスタイル */
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #FF3A91;
}

.icon::before {
  left: 0;
  transform: rotate(45deg);
}

.icon::after {
  right: 0;
  transform: rotate(-45deg);
}

/* --------アコーディオンの中身のスタイル-------- */
.content {
  overflow: hidden;
  background-color: none;

  /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
}

.content_inner {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------レイアウト用のスタイル-------- */
.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  z-index:998;
}

.wrapper details {
  margin-bottom: 16px;
}

.wrapper details:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .wrapper {
    width: 100%;
  }
}

.kaisha {
width: 100%;
}

.kaisha th,
.kaisha td {
border: 1px solid #ccc;
padding: 20px;
}

.kaisha th {
font-weight: bold;
background-color: #dedede; 
}

@media screen and (max-width: 767px) {
.kaisha,
.kaisha tr,
.kaisha td,
.kaisha th {display:block;}
.kaisha th {width:auto;}
}