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


.dots {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #f6e26c 3px, transparent 3px);
  background-position: 0 0;
  background-size: 30px 30px;
}


.c-check{
  position: relative;
  padding-left: 1.8em;
}

.c-check::before{
  content:"✓";
  position:absolute;
  left:-0.2em;              /* 文字エリアより少し前に出す */
  top:0.1em;
  width:1.4em;
  height:1.4em;
  border-radius:2px;
  display:grid;
  place-items:center;
  color:#626262;;
  font-weight:700;
  line-height:1;
	border: #626262 solid 1px;

}

.text-gray {
  color: rgba(104,104,104,1.00)
}
.kakusu__list {
  border-top: 1px solid rgba(0,0,0,.12);
}

.kakusu__item {
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.kakusu__q {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 24px;
  gap: 12px;
  align-items: center;
  padding: 20px 4px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
	font-weight: bold;
	line-height: 2em
	
}

.kakusu__q:focus-visible {
  outline: 2px solid rgba(0,0,0,.5);
  outline-offset: 4px;
  border-radius: 10px;
}

.kakusu__qtext {
  font-size: 1.5rem;
  font-size: max(1.5rem, 10px);
  line-height: 1.5;
}

.kakusu__more {
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .65;
  white-space: nowrap;
}

/* ＋アイコン（擬似要素2本で作る） */
.kakusu__icon {
  width: 24px;
  height: 24px;
  position: relative;
  justify-self: end;
  opacity: .8;
}
.kakusu__icon::before,
.kakusu__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.kakusu__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら「＋」→「×」（縦棒を回転させて消す 느낌） */
.kakusu__q[aria-expanded="true"] .kakusu__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 回答：高さアニメーション（grid trick） */
.kakusu__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.kakusu__aInner {
  overflow: hidden;
  padding: 0 4px 0;
  font-size: 16px;
  line-height: 1.8;
  opacity: .9;
}

.kakusu__item.is-open .kakusu__a {
  grid-template-rows: 1fr;
}
.kakusu__item.is-open .kakusu__aInner {
  padding: 0 4px 16px;
}


@media screen and (max-width: 767px) {
.kakusu__aInner {
  font-size: 15px;
  line-height: 1.5;
}	
	}
	
/* 「詳しくみる」→ 開いたら「閉じる」表示にしたい場合（任意） */
.kakusu__q[aria-expanded="true"] .kakusu__more {
  opacity: .5;
}

.qa-tittle {
  font-size: 1.2rem;
	font-weight: bold;
	margin: 10px 0 0;
}







.cards-row {
  margin: 50px auto;
}

.card-cafe {
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  border-radius: 3px;
  margin: 1em 1.5%;
  animation: scl 0.5s ease-in-out;
  transform-origin: left center;
  background-color: #fff;
	padding-bottom: 13px;
	  position: relative;
}





/* カテゴリラベル */
.card-category {
  position: absolute;
  top: -12px;           /* 上に少し飛び出す */
  left: -12px;          /* 左にも少し飛び出す */
  background: #593324;  /* ピンク */
  color: #fff;
  padding: 0.2em 0.8em;
  font-size: 0.9em;
  font-weight: bold;
  border-radius: 20px;
  z-index: 100!important;
}
.card-title {
  margin-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  font-size: 1.4em;
}
.card-image {
  width: 100%;
  height: 162px;
	margin-top: 10px;
}
.card-desc {
  padding: 0 1em 1em 1em;
  height: 105px;
  overflow: hidden;
  text-align: justify;
}

.card-desc p  {
	font-size: 0.9em;
  line-height: 1.5em;
	letter-spacing: -0.04
}
.card:hover {
  box-shadow: 7px 7px 15px 2px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease-in;
}

.ripple {
  border-radius: 50%;
  background: #ff8ec7;
  position: absolute;
  transform: scale(0);
  opacity: 1;
  animation: ripple 0.4s linear;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes scl {
  0% {
    opacity: 0;
    transform: scaleX(0.9) translateX(-50px);
  }
  75% {
    opacity: 0.2;
  }
  100% {
    transform: scaleX(1) translateX(0);
    opacity: 1;
  }
}



.card-actions{
	margin: 10px!important;
}



.btn-more{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1px solid #717171;
  border-radius: 9999px; /* しっかり角丸 */
  background-color: #ffffff;
  background-image: radial-gradient(circle, #FFF2A8 2px, transparent 2px);
  background-position: 0 0;
  background-size: 10px 10px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
	float: right;
	padding-right: 30px
}

.btn-more__arrow{
  display: inline-block;
  font-size: 14px;      /* 矢印を細く見せる */
  transform: translateX(0);
  transition: transform .25s ease;
}

.btn-more:hover .btn-more__arrow{
  transform: translateX(6px); /* 少し右へ */
}

/* お好み：ホバー時にほんのり反転（不要なら消してOK） */
.btn-more:hover{
  background-color: #FFF2A8;
  background-image: radial-gradient(circle, #ffffff 2px, transparent 2px);
}

/* フォーカス見やすく（キーボード操作） */
.btn-more:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}