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

style

******************************************************************************* */
/* ==
	main
=============================================================================== */
#main{margin-top:79px;}
#main .swiper-container img{
  width:100%;
  margin: 0 auto;
}
/* ==
	what's new
=============================================================================== */
#news,
#eventinfo{
	line-height:1.4;
}
#news dl,
#eventinfo dl{
  margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px dotted #ccc;
}
#news dt{ font-size:14px;}
#news dd:last-child{margin-bottom:0;}
#news dd em{font-weight:bold;}
#news dd span{
  font-weight:bold;
  color:#9b2423;
}
#eventinfo dt{display:none;}
#eventinfo dd hr{
	margin-bottom:-5px;
}
#new .flexBox{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#new .flexBox .col{
	width:48%;
	margin:0 0 15px 0;
	padding:0 0 10px 0;
	border-bottom:1px dashed #ccc;
}
.flexBox{
	align-items: normal;
}
/* ==
	cafe & shop
=============================================================================== */
#cafe{
  margin-bottom:40px;
  padding:70px 0 !important;
  position: relative;
  background-origin: border-box;
  background: url(/images/bg01.jpg) no-repeat 0 0;
  background-size: 80% auto;
  padding-bottom: 40px;
}
#cafe .text-area{
  float:right;
  padding:70px;
  background-image:url(/images/bg_asa01.png);
  color:#fff;
  max-width:560px;
}
#cafe h2{
  font-size:3.6rem;
  text-align:center;
  font-weight:normal;
}
#cafe p{margin:25px 0 0;}

@media only screen and (max-width: 660px) {
  #cafe{
    margin-bottom:40px;
    padding:200px 0  0!important;
    background-size: 100% auto;
  }
  #cafe .text-area{
    float:none;
    margin: 0 10px;
    padding:20px;
    max-width:100%;
  }
  #cafe h2{font-size:2.6rem;}  
  #cafe p{margin:15px 0 0;}
}
@media only screen and (max-width: 400px) {
  #cafe{padding:150px 0  0!important;}
}


/* ==
	salon
=============================================================================== */
#salon{
  margin-bottom:40px;
  padding:70px 0 !important;
  position: relative;
  background-origin: border-box;
  background: url(/images/bg02.jpg) no-repeat right 0;
  background-size: 80% auto;
  padding-bottom: 40px;
}
#salon .text-area{
  float:left;
  padding:70px;
  background-image:url(/images/bg_asa02.png);
  color:#fff;
  max-width:560px;
}
#salon h2{
  font-size:3.6rem;
  text-align:center;
  font-weight:normal;
}
#salon p{margin:25px 0 0;}

@media only screen and (max-width: 660px) {
  #salon{
    margin-bottom:40px;
    padding:200px 0  0!important;
    background-size: 100% auto;
  }
  #salon .text-area{
    float:none;
    margin: 0 10px;
    padding:20px;
    max-width:100%;
  }
  #salon h2{font-size:2.6rem;}    
  #salon p{margin:15px 0 0;}
}
@media only screen and (max-width: 400px) {
  #salon{padding:150px 0  0!important;}
}

/* ==
	event
=============================================================================== */
#event{
  margin-bottom:40px;
  padding:70px 10px !important;
  background-origin: border-box;
  background: url(/images/bg03.jpg) no-repeat center 0;
  background-size: auto 100%;
  padding-bottom: 40px;
}
#event p{color:#333;}
#event .col:first-child{
  flex-basis:150%;
  margin-bottom:20px;
}
#event #facebook{
  background:#fff;
  border-radius: 10px;
  padding:20px;
  text-align:center;
}
#event #facebook iframe{margin: 0 auto;}

@media only screen and (max-width: 660px) {
  #event{
    background: url(/images/bg03.jpg) no-repeat right 0;
    background-size: auto 100%;
  }
  #event #facebook{padding:10px;}  
}

/* ==
	blog
=============================================================================== */
#blog{
	max-width:960px;
	margin:0 auto;
	padding-top:0;
}
#coco-blog-latest{
	padding-top:0 !important;
}
/* 1) コンテナを強制グリッド化＋はみ出し防止 */
#coco-blog-latest{
  display: grid !important;
  grid-template-columns: repeat(var(--cols,1), minmax(0, 1fr)) !important;
  gap: var(--gap, 24px) !important;
  margin: 24px 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  overflow: visible !important; /* 親テーマのoverflow隠し対策 */
}

/* 2) 子要素の基本リセット（Blocksy/他テーマ干渉の除去） */
#coco-blog-latest, #coco-blog-latest *{
  box-sizing: border-box;
  min-width: 0;  /* flex/grid内のテキストはみ出し防止 */
}

/* 3) カードの骨格を安定化 */
#coco-blog-latest .cbl-card{
	position: relative;
	bottom:0;
	right:0;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff;
  border: 1px solid #e6e6e6;
  overflow: hidden;
	
}

/* 4) クリック範囲（リンク）の衝突回避
   テーマ側が a を block化／position化している場合の保険 */
#coco-blog-latest .cbl-link{
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: static !important;
}

/* 5) 画像まわり（高さ崩れ・比率ズレ対策） */
#coco-blog-latest .cbl-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;         /* Safari でも可。古環境は次のmin-heightが保険 */
  min-height: 160px;            /* aspect-ratio未対応ブラウザの保険 */
  background: #f3f4f6;
  overflow: hidden;
}
#coco-blog-latest .cbl-media img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 6) メタ領域（テキストのはみ出し防止＋省略） */
#coco-blog-latest .cbl-meta{
  padding: 10px 0 30px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#coco-blog-latest .cbl-title{
  margin: 0;
  font-weight: normal;
  color: #111;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;   /* 2行省略 */
	color:#de7979;	
}
#coco-blog-latest .cbl-date{
	position: absolute;
	bottom:10px;
	right:10px;
  margin: 0;
  color: #666;
  font-size: 12px;
}

/* 7) グローバルCSSの「article」「a」指定に勝つ */
#coco-blog-latest article{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
}
#coco-blog-latest a{
  text-decoration: none;
  color: inherit;
}

/* 8) ブレークポイント（崩れたらいったん2列固定に落とす） */
@media (min-width: 640px){
  #coco-blog-latest{ --cols: 2 !important; }
}
@media (min-width: 1024px){
  #coco-blog-latest{ --cols: 3 !important; } /* 3列で窮屈なら 2 に */
}