/* TOPコメント */
.fade .top_copy{
margin:3rem 0 0 0;
}
.fade .top_copy span,
.fade h1 span {
  display: inline-block;
  vertical-align: top;
  opacity: 0;
  animation-duration: 0.7s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.top_copy span{
color:white;
font-weight:bold;
color:#fff;
font-size:2rem;
line-height:1.4;
letter-spacing:0.05em;
}
.top_hero_text h1 span{
font-size:1rem;
letter-spacing:.01em;
color:white;
padding-left:0.1rem;
font-weight:bold;
line-height:1.4;
}
.top_mincho{
width:160px;
}

/* gold line 左から伸びる（top ページは画像ロード後に発火） */
.fade .gold_line{
  animation: none;
  width:180px;
  margin:0.6rem 0 0.8rem 0;
}
.show .gold_line{
  animation: expandLine 1.8s ease forwards;
  animation-delay: .8s;
}
@keyframes expandLine{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* =========================
TOP img
========================= */

.top_hero{
position:relative;
width:100%;
overflow:hidden;
background:#eadfd2;
height:330px;
}
.top_hero picture{
display:block;
width:100%;
height:100%;
}
/* TOP画像 */
.top_hero_img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}

/* TOPロゴ */
.top_hero_text{
position:absolute;
top:12px;
left:4%;
right:4%;
z-index:2;
color:#fff;
max-width:900px;
margin:auto;
}
.top_logo_div{
display:inline-block;
}
.top_logo{
width:95px;
margin-left:2px;
}
.top_hero_text em{
font-size:0.8rem;
text-align: center;
margin:0.5rem 0.3rem 0 0;
display:block;
color:#E6E6E6;
font-weight:bold;
line-height:140%;
}

/* TOP4つのポイント */
.top_point_ul{
display:flex;
justify-content:flex-start;
align-items:flex-start;
margin:0px 0 1.1rem -0.8rem;
}
.top_point_ul li{
text-align:center;
display:block;
padding:0px 0.3rem 0 0.3rem;
position:relative;
min-width: 52px;
}
.top_point_ul li:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:42px;
background:rgba(223,181,123,.4);
}
.top_point_img{
height:23px;
margin:0 auto 0.6rem auto;
}
.top_point_ul p{
display:block;
font-size:0.9rem;
letter-spacing:.04em;
line-height:1.45;
text-align:center;
color:white;
}

/* TOP 電話・WEB予約ボタン */
.top_hero_bottom{
position:absolute;
left:4%;
right:4%;
bottom:8px;
z-index:2;
max-width:900px;
margin:auto;
}
.top_hero_reserve{
width:100%;
max-width:500px;
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin:auto;
}
.top_hero_btn{
min-height:46px;
border-radius:6px;
color:#fff;
padding:0.6rem 0;
display:flex;
justify-content:center;
align-items: center;
}
.top_tel_img {
height:22px;
margin:0.2rem 1rem 0px auto;
}
.top_web_img {
height:22px;
margin:0 1rem 0rem 0px;
}
.to_hero_right{
margin:0 auto 0px 0;
}
.top_hero_btn span{
display:block;
font-size:1.3rem;
letter-spacing:.04em;
color:#fff;
margin:0.3rem 0.2rem 0 0;
text-align:center;
line-height:1;
}
.top_hero_btn em{
display:block;
text-align:center;
font-size:1.2rem;
line-height:1;
letter-spacing:0.1em;
color:#fff;
margin:0.45rem 0 0.1rem 0;
font-weight:bold;
}
.top_hero_btn.tel{
background: rgba(181,153,121,0.85);
}
.top_hero_btn.web{
background:rgba(114,123,81,0.85);
}














/* =========================
新着情報
========================= */
.news{
width:95%;
max-width:900px;
padding:0.9rem 2rem 1.1rem 2rem;
margin:1.8rem auto 2.2rem auto;
background-image:url("../img/common/mortar_bg.webp");
background-repeat:repeat;
background-size:28rem auto;
background-position:center top;
border-left:3px solid #efe4d8;
transform: translateX(-2px);
position:relative;
overflow:hidden;
}
.news_div{
width:100%;
padding:0rem 0 0px 0;
margin:0px auto 0 0;
}
.news_div_absolute{
position:absolute;
right:-25px;
bottom:-5px;
z-index:1;
}
.news_div_absolute img{
width:80px;
opacity:0.4;
}
.news_h2{
display:block;
font-size:1.2rem;
line-height:1.2;
padding-left:0px;
letter-spacing:.08em;
margin-bottom:0.6rem;
color:#6b5744;
}
.news_span{
display:block;
font-size:2rem;
line-height:1.2;
font-weight:bold;
margin-bottom:0.2rem;
letter-spacing:0.09em;
color:#6b5744;
}
.news_white{
width:100%;
padding:0.7rem 0 0.3rem;
position:relative;
z-index:2;
}
.news_white p{
display:block;
font-size:1.25rem;
letter-spacing:.05em;
line-height:1.8;
position:relative;
z-index:2;
}















/* =========================
3つのTOPIC
========================= */
.topic{
width:94%;
margin:1rem auto 2.7rem auto;
}
.topic_ul{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0 2.5%;
width:100%;
padding:0.5rem 0.3rem 0.1rem 0.3rem;
max-width:900px;
margin:1rem auto 2.5rem auto;
align-items:stretch;
}

/* topic画像3つ */
.topic_ul li img{
width:100%;
display:block;
border-radius:14px 14px 0 0;
padding:0.3rem;
}

/* 左上バッジ */
.topic_absolute{
position:absolute;
top:2px;
left:-3px;
z-index:3;
background:rgba(166,139,106,.9);
border-radius:0px 4px 4px 0;
box-shadow:0 4px 12px rgba(80,60,35,.2);
}
/* ← 下の折れ影 */
.topic_absolute::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0;
height:0;
border-top:6px solid rgba(80,90,60,.5);
border-left:6px solid transparent;
}
/* 1個目 */
.topic_ul li:nth-child(1) .topic_absolute{
background:linear-gradient(
to right,
rgba(79,145,175,0.95),
rgba(79,145,175,0.75)
);
}

/* 2個目 */
.topic_ul li:nth-child(2) .topic_absolute{
background:linear-gradient(
to right,
rgba(114,123,81,0.95),
rgba(114,123,81,0.75)
);
}

/* 3個目 */
.topic_ul li:nth-child(3) .topic_absolute{
background:linear-gradient(
to right,
rgba(166,139,106,0.95),
rgba(166,139,106,0.75)
);
}
.topic_absolute h3{
padding:0.2rem 0.7rem;
font-size:1.1rem;
letter-spacing:.02em;
color:#fff;
}
.topic_bottom{
display:block;
position:relative;
background:rgba(255,255,255,1);
padding:0.4rem 0rem;
border-radius:0 0 10px 10px;
margin-top:-14px;
z-index:3;
flex:1; /* ← これで下部分が同じ高さに伸びる */
}
.topic_ul li a{
display:flex;
flex-direction:column;
height:100%;
}
.topic_bottom p{
text-align:center;
display:block;
font-size:1.1rem;
letter-spacing:.01em;
line-height:1.5;
}





































/* =========================
コンセプト　店内写真
========================= */

.concept{
width:100%;
max-width:900px;
margin:0rem auto 0rem;
padding:0.7rem 0 0.7rem 0;
}
.concept_padding{
padding:0 0rem 0rem 0rem;
}
.concept_slide_wrap{
width:100%;
overflow:hidden;
margin:auto;
}

.concept_slide{
padding-bottom:2rem;
}

.concept_slide .swiper-slide{
width:66%;
position:relative;
background:#f4f1ed;
border-radius:0px;
}

.concept_slide img{
width:100%;
display:block;
border-radius:0px 0px 0 0;
}
.concept_bottom{
padding:0.8rem 0 0.6rem 0;
width:100%;
margin:auto;
background:#f7f4f0;
}
.concept_bottom h3{
display:block;
padding:0rem 0rem 0.4rem;
font-size:1.3rem;
letter-spacing:.05em;
font-weight:bold;
color:#8d705b;
text-align:center;
}
.concept_bottom p{
display:block;
font-size:1.1rem;
letter-spacing:.06em;
line-height:1.9;
text-align:center;
}
















/* =========================
料金システム
========================= */
.price{
width:94%;
max-width:900px;
margin:0rem auto 0 auto;
padding:2.5rem 0 1.2rem;
}
.price_titile_ul{
padding:0 0.7rem 2.3rem 0rem;
}
.price_right{
position:relative;
margin-top:-38px;
display:block;
text-align:right;
}
.price_titile_ul p{
display:inline-block;
font-size:1.4rem;
font-weight:bold;
color:#7a6853;
letter-spacing:0.09rem;
margin-bottom:1.8rem;
line-height:1.3;
padding-left:0.6rem;
padding-top:0.2rem;
}
/* ３つの枠 */
.proce_ul{
display:grid;
grid-template-columns:repeat(3,1fr);
align-items:center;
justify-content:center;
gap:0px 8px;
}
.proce_ul li{
background:white;
border-radius:6px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
border:1px solid #f4f4f4;
padding-top:0.1rem;
position:relative;
}
.price_div{
width:100%;
text-align:center;
margin:0.3rem 0 0.2rem 0;
display:flex;
justify-content:center;
align-items:center;
}
.proce_ul p{
font-size:1.4rem;
color:#7a6853;
margin:0 0.2rem 0px 1.1rem;
line-height:1;
}
.proce_ul em{
font-size:1.1rem;
color:#7a6853;
line-height:1;
padding-bottom: 0.1rem;
}
.proce_ul span{
display:inline-block;
font-size:1.6rem;
color:#7a6853;
line-height:1;
margin:0.2rem 0rem 0px 0px;
}
.proce_ul strong{
display:inline-block;
font-size:1.7rem;
color:#7a6853;
line-height:1;
letter-spacing:0.02em;
font-weight:bold;
}
/* リボン */
.popular_ribbon{
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
width:85%;
max-width:150px;
height:18px;
line-height:24px;
text-align:center;
background:linear-gradient(to right,#b59b68,#d6c08d,#b59b68);
color:#fff;
font-size:1.1rem;
letter-spacing:.08em;
z-index:5;
}
.popular_ribbon::before{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:5px solid #fff; /* ← 小さく */
}
.popular_ribbon::after{
content:"";
position:absolute;
right:0;
top:0;
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:5px solid #fff; /* ← 小さく */
}
/* 詳細コメント*/
.price_text{
text-align:center;
margin:0.8rem auto;
}
.price_text p{
display:inline-block;
font-size:1.2rem;
letter-spacing:.01em;
line-height:1.3;
padding:0 0.6rem;
}
.price_text span{
display:block;
font-size:1.2rem;
letter-spacing:.04em;
line-height:1.3;
}
.price_text em{
display:inline-block;
font-size:1.5rem;
letter-spacing:.04em;
line-height:1.3;
margin-right: 0.1rem;
margin-top:0rem;
}























/* =========================
shopdata
========================= */
.shop_data{
margin:2rem 0 3.5rem;
}
.shop_ul{
display:grid;
grid-template-columns:1fr 3fr;/* 比率 */
align-items:stretch;
border:1px solid #e2e2e2;
justify-content:center;

background:rgba(255,255,255,0.9);
}
.shop_ul li{
padding:1.4rem 1rem;
display:flex;
align-items:center;
border-top:1px solid #e2e2e2;
}
.shop_ul li:first-child{
border-top:0;
}
/* 全ての列の1個目 */
.shop_ul li:nth-child(2n+1){
justify-content:center;
background:#f9f7f4;
border-right:1px solid #e2e2e2;
}
.shop_ul li:nth-child(2n+2){
border-right:0px;
background:#fffefd;
border-top:1px solid #e2e2e2;
}
.shop_ul li:nth-child(2){
border-top:0;
}
.shop_ul h3{
display:block;
font-size:1.2rem;
letter-spacing:0.03em;

}
.shop_ul p{
display:block;
font-size:1.2rem;
letter-spacing:0.03em;
}
































/* ipad */
@media (min-width:768px){
/* TOP */
.top_logo{
width:120px;
}
.top_copy{
margin:1.8rem 0 0.3rem 0;
}
.top_hero_reserve{
margin:0 auto 0 0;
}
/* TOP画像 */
.top_hero{
height:350px;
}
/* TOPコメント */
.fade .top_copy{
margin:2.5rem 0 0 0;
}
.top_copy span{
font-size:2rem;
}
.top_hero_text h1 span{
font-size:1.2rem;
}
/* 3つのTOPIC */
.topic_ul{
gap:20px;
}
.topic_ul li img{
height:140px; /* 好きな高さ */
object-fit:cover;
object-position:center center; /* ← 上を残して下をカット */
}
.topic_bottom{
margin-top:-20px;
}
.topic_bottom p{
font-size:1.1rem;
text-align:center;
}

/* プライス */
.price{
padding:2.7rem 0 1.7rem;
}
.proce_ul{
gap:0px 25px;
}
/* コンセプト写真 PCはSwiper CSS上書き・グリッド表示 */
.concept_slide{
  overflow:hidden;
  flex-wrap:nowrap;
  gap:8px;
  padding-bottom:0;
  transform:none !important;
  padding-bottom:3rem;
}
.concept_slide .swiper-slide{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0;
}
.concept_slide .swiper-slide:nth-child(n+5){
  display:none;
}
.concept{
width:94%;
}
.concept_bottom h3{
font-size:1.2rem;
letter-spacing:.02em;
}
.concept_bottom p{
font-size:1rem;
letter-spacing:.02em;
}
/* shopdata*/
.shop_data{
margin:3rem 0 4rem;
}


}
/* ipad pc */


@media (min-width:1025px){

}