/* TOPコメント */
.fade .top_copy{
margin:0;
}
.fade .top_copy 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:#fff;
font-weight:normal;
font-size:1.6rem;
line-height:1.6;
letter-spacing:.14em;
}

/* gold line 真ん中から伸びる（top ページは画像ロード後に発火）
   色と光のにじみは旧 urawa の Scroll の線（.scrolldown4_li1）と同じ */
.fade .gold_line{
animation:none;
width:120px;
margin:.8rem auto 0;
background:linear-gradient(
90deg,
rgba(255,248,228,0) 0%,
rgba(255,238,190,.95) 30%,
rgba(255,255,255,.98) 50%,
rgba(255,220,150,.95) 70%,
rgba(255,244,210,0) 100%
);
box-shadow:
0 0 5px rgba(255,230,170,.75),
0 0 14px rgba(255,210,130,.45);
transform-origin:center;
}
.show .gold_line{
animation:expandLine .9s ease forwards;
animation-delay:.4s;
}
@keyframes expandLine{
from{ transform:scaleX(0); }
to  { transform:scaleX(1); }
}

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

.top_hero{
position:relative;
width:100%;
height:440px;
overflow:hidden;
background:#342a20;
}
/* TOP画像（旧 okasan1 と同じ見え方）
   画像は画面より90px広くして上下は真ん中で切り、
   読み込みが終わったら（js/common.js が loaded を付ける）10秒かけて左へ90px動かす */
.top_hero_img{
width:calc(100% + 90px);
max-width:none;
height:100%;
object-fit:cover;
object-position:center center;
}
.top_hero_img.loaded{
animation:topHeroPan 10s linear forwards;
}
@keyframes topHeroPan{
from{ transform:translateX(0); }
to  { transform:translateX(-90px); }
}
/* 画像に黒を薄く被せる（旧 okasan1 の .black01 と同じ濃さ） */
.top_hero::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.3);
z-index:1;
pointer-events:none;
}

/* TOPロゴ（文字ロゴ・白文字なので影をつける） */
.top_logo_div{
position:absolute;
top:12px;
left:14px;
z-index:3;
display:block;
text-decoration:none;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.top_logo_div .logo_text{
text-align:left;
}
.top_logo_div .logo_en{
font-size:1.6rem;
}
.top_logo_div .logo_ja{
font-size:1rem;
}

/* TOPコメントの位置（高さの真ん中） */
.top_hero_text{
position:absolute;
top:50%;
transform:translateY(-50%);
left:4%;
right:4%;
z-index:2;
color:#fff;
max-width:900px;
margin:auto;
text-align:center;
}

/* TOP4つのポイント */
.top_point_ul{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
max-width:500px;
margin:0 auto 1.2rem;
}
.top_point_ul li{
border:1px solid rgba(255,255,255,.45);
border-radius:8px;
background:rgba(255,255,255,.1);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
padding:.6rem .2rem;
}
.top_point_ul p{
display:block;
font-size:.95rem;
letter-spacing:.02em;
line-height:1.45;
text-align:center;
color:#fff;
}

/* TOP 電話・WEB予約ボタン */
.top_hero_bottom{
position:absolute;
left:4%;
right:4%;
bottom:14px;
z-index:2;
max-width:900px;
margin:auto;
}
.top_hero_reserve{
width:100%;
max-width:500px;
display:grid;
grid-template-columns:1fr 1fr;
gap:.8rem;
margin:auto;
}
.top_hero_btn{
min-height:50px;
border-radius:40px;
color:#fff;
padding:0.6rem 0;
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
}
.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.25rem;
letter-spacing:.08em;
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.15rem;
line-height:1;
letter-spacing:.06em;
color:#fff;
margin:0.45rem 0 0.1rem 0;
font-weight:bold;
}
/* LINEのアイコンだけLINEの緑 */
.top_line_icon{
width:28px;
height:28px;
color:#06c755;
margin:0 .9rem 0 0;
}
.top_line_letter{
stroke:#fff;
}














/* =========================
新着情報
========================= */
.news{
width:94%;
max-width:900px;
margin:1.8rem auto 1.4rem;
border:1px solid #e8ded3;
border-radius:14px;
background:#fff;
overflow:hidden;
}
/* 見出しの帯 */
.news_div{
display:flex;
align-items:baseline;
gap:.8rem;
padding:.9rem 1.4rem .8rem;
background:#a58358;
transform:none;
}
.news_span{
display:block;
font-size:1.6rem;
line-height:1;
color:#e1d5c6;
}
.news_h2{
display:block;
font-size:1.3rem;
letter-spacing:.12em;
line-height:1;
color:#fff;
}
.news_time{
margin-left:auto;
font-size:1.1rem;
line-height:1;
color:#e1d5c6;
}
.news_white{
padding:1.3rem 1.4rem 1.4rem;
}
.news_white p{
display:block;
font-size:1.3rem;
letter-spacing:.04em;
line-height:1.85;
}

/* Web予約後のご返信について（include/reservation_reply_notice.php の style を緑に寄せる） */
body .reservation_reply_notice{
width:94%;
max-width:900px;
border-color:#e8ded3;
border-radius:14px;
background:#fff;
color:#33302d;
}
body .reservation_reply_icon{
background:#f7f3ee;
color:#a58358;
}
body .reservation_reply_title,
body .reservation_reply_heading{
color:#a58358;
}
body .reservation_reply_toggle,
body .reservation_reply_number{
color:#a58358;
border-color:#c3a273;
}














/* =========================
3つのTOPIC
========================= */
.topic{
width:100%;
margin:.6rem auto 1rem auto;
}
/* スマホは横スワイプ（js/top.js の Swiper）。次のバナーが少し見える幅
   iPad・PC は 744 の中で3等分に並べる */
.topic_slide_wrap{
width:100%;
}
.topic_ul{
display:flex;
width:100%;
padding:0.5rem 0 0.1rem 0;
max-width:900px;
margin:0 auto;
align-items:stretch;
}
.topic_ul li{
width:66%;
}
/* リンクあり（a）もなし（div）も同じカード */
.topic_card{
display:flex;
flex-direction:column;
height:100%;
border:1px solid #e8ded3;
border-radius:12px;
overflow:hidden;
background:#fff;
}
/* タイトルなしは画像の高さだけ（タイトルありと並んでも下に空きを作らない） */
.topic_card.no_title{
height:auto;
}

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

/* 左上バッジ */
.topic_absolute{
position:absolute;
top:8px;
left:8px;
z-index:3;
background:#a58358;
border-radius:20px;
}
.topic_absolute h3{
padding:.2rem .9rem;
font-size:1rem;
letter-spacing:.01em;
color:#fff;
line-height:1.5;
}
.topic_bottom{
display:block;
position:relative;
background:#fff;
padding:.6rem 0;
z-index:3;
flex:1; /* ← これで下部分が同じ高さに伸びる */
}
.topic_bottom p{
text-align:center;
display:block;
font-size:1rem;
letter-spacing:.01em;
line-height:1.5;
color:#33302d;
}














/* =========================
セクション共通
========================= */
.top_section{
padding:2.6rem 0 2.6rem;
}
/* バナーがないときは新着情報のすぐ下に来るので、上を少し詰める */
.news + .top_section{
padding-top:2rem;
}














/* =========================
コンセプト　店内写真
========================= */
.concept_section{
padding-bottom:2rem;
}
.concept{
width:100%;
max-width:900px;
margin:0rem auto 0rem;
padding:0.7rem 0 0.7rem 0;
}
.concept_slide_wrap{
width:100%;
overflow:hidden;
margin:auto;
}

.concept_slide{
padding-bottom:2rem;
}

.concept_slide .swiper-slide{
width:66%;
position:relative;
background:#fff;
border-radius:12px;
overflow:hidden;
border:1px solid #e8ded3;
}

/* 縦長・比率違いの写真を登録しても揃うよう 3:2 で切り抜く */
.concept_slide img{
width:100%;
aspect-ratio:3 / 2;
object-fit:cover;
display:block;
}
.concept_bottom{
padding:1rem 0 .9rem;
width:100%;
margin:auto;
background:#fff;
}
.concept_bottom h3{
display:block;
padding:0rem 0rem 0.4rem;
font-size:1.3rem;
letter-spacing:.05em;
font-weight:bold;
color:#a58358;
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.6rem 0 2.6rem;
}
/* ３つの枠（コースが1〜2個でも真ん中にそろうよう flex） */
.proce_ul{
display:flex;
justify-content:center;
align-items:center;
gap:0px 8px;
margin-top:1.6rem;
}
.proce_ul li{
flex:0 1 32%;
background:white;
border-radius:12px;
height:78px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
border:1px solid #e8ded3;
padding-top:0.1rem;
position:relative;
}
/* 人気No.1 の枠だけ濃い緑の線 */
.proce_ul li.popular{
border-color:#a58358;
}
.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.35rem;
color:#33302d;
margin:0 0.2rem 0px 1.1rem;
line-height:1;
}
.proce_ul em{
font-size:1.1rem;
color:#33302d;
line-height:1;
padding-bottom:0.1rem;
}
.proce_ul span{
display:inline-block;
font-size:1.6rem;
color:#33302d;
line-height:1;
margin:0.2rem 0rem 0px 0px;
}
.proce_ul strong{
display:inline-block;
font-size:1.65rem;
color:#33302d;
line-height:1;
letter-spacing:0.02em;
font-weight:bold;
}
/* リボン */
.popular_ribbon{
position:absolute;
top:-11px;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
height:22px;
padding:0 1rem;
border-radius:20px;
background:#a58358;
color:#fff;
font-size:1rem;
letter-spacing:.08em;
white-space:nowrap;
z-index:5;
}
/* 詳細コメント*/
.price_text{
text-align:center;
margin:0.8rem auto;
}
.price_text p{
display:inline-block;
font-size:1.25rem;
letter-spacing:.01em;
line-height:1.8;
padding:0.6rem 0.6rem 0.4rem 0.6rem;
color:#7b756e;
}
.price_text span{
display:block;
font-size:1.2rem;
letter-spacing:.04em;
line-height:1.3;
color:#7b756e;
}
.price_text em{
display:inline-block;
font-size:1.2rem;
letter-spacing:.04em;
line-height:1.3;
margin-right:0.1rem;
margin-top:0rem;
color:#7b756e;
}














/* =========================
shopdata
========================= */
/* 緑の背景になる日もあるので余白は padding（index.php の $_bg_green） */
.shop_data{
padding:2.6rem 0 3rem;
}
.shop_ul{
display:grid;
grid-template-columns:1fr 3fr;/* 比率 */
align-items:stretch;
border:1px solid #e8ded3;
border-radius:14px;
overflow:hidden;
justify-content:center;
margin-top:0.1rem;
background:#fff;
}
.shop_ul li{
padding:1.4rem 1rem;
display:flex;
align-items:center;
border-top:1px solid #e8ded3;
}
.shop_ul li:first-child{
border-top:0;
}
/* 全ての列の1個目 */
.shop_ul li:nth-child(2n+1){
justify-content:center;
background:#f7f3ee;
border-right:1px solid #e8ded3;
}
/* 店舗情報が緑の背景の日は、見出しのマスが背景に溶けないよう白にする（区切り線は右の列と同じ色・文字は淡めの緑を太字で） */
.shop_data.back_green .shop_ul li:nth-child(2n+1){
background:#fff;
}
.shop_data.back_green .shop_ul h3{
color:#a58358;
font-weight:bold;
}
.shop_ul li:nth-child(2n+2){
border-right:0px;
background:#fff;
}
.shop_ul li:nth-child(2){
border-top:0;
}
.shop_ul h3{
display:block;
font-size:1.2rem;
letter-spacing:0.03em;
color:#6b5a4c;
}
.shop_ul p{
display:block;
font-size:1.2rem;
letter-spacing:0.03em;
line-height:1.7;
}
































/* =========================
セラログ（最新ポスト）
========================= */
/* 緑の背景になる日もあるので余白は padding（index.php の $_bg_green）。
   スマホは下が「セラログでフォローする」ボタンなので下の余白を詰める */
.sera_log{
padding:2.6rem 0 1.8rem;
}
.sera_log_lead{
margin:-.4rem 0 1.6rem;
font-size:1.25rem;
line-height:1.8;
letter-spacing:.04em;
text-align:center;
color:#7b756e;
}
.sera_log_more{
margin-top:1.8rem;
}
/* フォローボタン・予約ボタンは iPad・PC だけ
   （スマホは埋め込みの下の「セラログでフォローする」。予約ボタンもTOP画像の下にある） */
.sera_log_follow,
.top_hero_reserve.sera_log_reserve{
display:none;
}




/* ipad mini（縦744px）から Swiper を使わずに並べる
   境目は js/top.js の spSwiper() と同じ */
@media (min-width:744px){
/* 3つのTOPIC（1枚・2枚でも真ん中に寄るように flex） */
.topic{
width:95%;
}
.topic_ul{
flex-wrap:wrap;
justify-content:center;
gap:20px;
}
.topic_ul li{
width:calc((100% - 40px) / 3);
}
.topic_ul li img{
height:140px; /* 好きな高さ */
object-fit:cover;
object-position:center center;
}
.topic_bottom p{
font-size:1.1rem;
text-align:center;
}

/* コンセプト写真 PCはSwiper CSS上書き・4等分に並べる（1〜3枚でも幅はそのままで真ん中に寄せる） */
.concept_slide{
  overflow:hidden;
  flex-wrap:nowrap;
  justify-content:center;
  gap:8px;
  transform:none !important;
  padding-bottom:3rem;
}
.concept_slide .swiper-slide{
  flex:0 1 calc((100% - 24px) / 4) !important;
  width:auto !important;
  min-width:0;
}
.concept{
width:94%;
}
.concept_bottom h3{
font-size:1.2rem;
letter-spacing:.02em;
}
.concept_bottom p{
font-size:1rem;
letter-spacing:.02em;
}

/* セラログ：左に案内・右に埋め込み（1枚の写真が大きく出て、埋め込みだけ縦に長くなるため） */
.sera_log_wrap{
display:grid;
grid-template-columns:2fr 3fr;
align-items:start;
gap:0 30px;
}
/* iPad・PC は下が埋め込みなので、ほかの区切りと同じ余白に戻す */
.sera_log{
padding-bottom:3rem;
}
.sera_log_more{
display:none;
}
.sera_log_follow{
display:flex;
justify-content:center;
align-items:center;
gap:.8rem;
min-height:46px;
border:1px solid #a58358;
border-radius:30px;
background:#fff;
transition:background .25s ease;
}
.sera_log_follow img{
width:22px;
height:22px;
}
.sera_log_follow_text{
font-size:1.25rem;
letter-spacing:.06em;
font-weight:bold;
color:#a58358;
}
/* TOP画像の上の予約ボタンは白い文字・白いアイコンなので、ここでは店の色で塗る */
.top_hero_reserve.sera_log_reserve{
display:grid;
grid-template-columns:1fr;
gap:.8rem;
margin-top:1rem;
}
.sera_log_reserve .top_hero_btn{
background:#a58358;
border-color:#a58358;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}

}
@media (min-width:744px) and (hover: hover) and (pointer: fine){
.sera_log_follow:hover{
background:#f7f3ee;
}
}


/* ipad */
@media (min-width:768px){
/* TOP */
.top_hero{
height:480px;
}
.top_logo_div{
top:16px;
left:24px;
}
.top_logo_div .logo_en{
font-size:2.2rem;
}
.top_logo_div .logo_ja{
font-size:1.2rem;
}
.top_hero_reserve{
margin:0 auto;
}
/* TOPコメント */
.top_copy span{
font-size:2rem;
}

/* プライス */
.proce_ul{
gap:0px 20px;
}


}
/* ipad pc */


@media (min-width:1025px){

}