@charset "UTF-8";

/* 共通設定 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #3B1705;
    background: url(../images/paper-bg-01.jpg);
    letter-spacing: 0.05em;
}

/* コンテナ共通 */
.container {
    width: min(100% - 4rem, 1080px);
    margin-inline: auto;
    position: relative;
}


/* ----------------------------------------
　色
---------------------------------------- */
/* 珈琲ブラウン */
.brown {
    color: #3B1705;
}

/* ラテベージュ */
.beige {
    color: #d3b28a;
}

/* 抹茶グリーン */
.matcha {
    color: #4b621d;
}

/* 桜ピンク（薄） */
.pink {
    color: #F7C1CF;
}

/* 茶蔵ピンク（濃） */
.dark-pink {
    color: #D0478B;
}


/* ----------------------------------------
　位置
---------------------------------------- */
/* 中央寄せ */
.center {
    text-align: center;
}

/* 右寄せ */
.right {
    text-align: right;
}


/* ----------------------------------------
　テキスト
---------------------------------------- */
/* リード文のテキスト　共通 */
.lead {
    font-weight: 500;
    line-height: 2;
    margin-bottom: 12px;
    max-width: 700px;
    margin: 50px auto 30px;
    word-break: keep-all;
    text-align: left;
}

/* 太字テキスト */
.bold {
    font-weight: 700;
}

/* 注意書きテキスト（赤字） */
.caution-text {
    display: inline-block;
    color: #E60112 !important;
    font-weight: 700 !important;
    font-size: 0.9em;
    line-height: 1.5;
    text-indent: -1em;
    padding-left: 1em;
    margin: 4px auto;
}

/* 小さめサイズのテキスト（70％） */
.small-size-text {
    font-size: 0.7em;
}


/* ----------------------------------------
　リンク
---------------------------------------- */
/* リンクテキスト　ホバーで半透明に */
a.link {
    transition: 0.3s;
}

/* リンクテキスト--ホバー（半透明） */
a.link:hover {
  opacity: 0.6;
}


/* リンク画像　ホバーで画像拡大 */
figure {
	overflow: hidden;
}
figure img {
	transition: .3s;
}
a:hover figure img {
	transform: scale(1.05);
}


/* ----------------------------------------
　ボタン
---------------------------------------- */
/* 茶色ボタン */
.btn {
    display: inline-block;
    padding: 1em 2em;
    background-color: #3B1705;
    border-radius: 10em;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    font-weight: 500;
    transition: 0.3s;
    position: relative;
    text-align: center; 
    border: solid 2px#3B1705;
}

/* 茶色ボタンの中の矢印　左に余白 */
.btn i {
    padding-left: 10px;
}

/* 茶色ボタン--ホバー（拡大＆半透明） */
a.btn:hover{
    opacity: 0.9;
    transform: scale(1.05);

}

/* Instagram 虹色ボタン */
.instagram_btn {
    display: inline-block;
    padding: 1.25em 2em 1.25em 4.5em;
    border-radius: 10em;
    background: linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));
    color: #fff;
    text-decoration: none;
    line-height: 1;
    font-weight: 500;
    transition: 0.3s;
    position: relative;
    text-align: center;
    margin: 10px 0;
}

.instagram_btn::before {
    content: '';
    display: block;
    width: 30px; 
    height: 30px;
    background-image: url(../images/instagram_icon_white.svg);
    background-size: contain;
    background-repeat:no-repeat;
    position:absolute;
    top:0;
    left:2em;
    bottom:0;
    margin:auto;
}

/* Instagramボタン--ホバー（拡大＆半透明） */
.instagram_btn:hover {
    opacity: 0.9;
    transform: scale(1.05)
}


/* ----------------------------------------
　装飾
---------------------------------------- */
/* セクションタイトル共通　桜の花びらの飾り */
.sakura_deco {
    width: 100px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/* お知らせ　ノート風の罫線（点線） */
p.note {
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                      linear-gradient(180deg, #d3b28a 1px, transparent 1px); /* 点線2の色と太さ */
    background-size: 8px 100%, /* 点線1のサイズ */
                     100% 2.5em; /* 点線2のサイズ */
    line-height: 2.5em; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
  }


/* ----------------------------------------
　動画挿入
---------------------------------------- */
/* YouTube */
.youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.youtube iframe {
    width: 100%;
    height: 100%;
    padding-bottom: 12px;
}


/* ----------------------------------------
　ヘッダー
---------------------------------------- */
/* ヘッダー　キービジュアルの手前に配置 */
header {
    color: #fff;
    font-weight: 700;
    position: absolute;
    width: 100%;
    z-index: 3;
}

/* ヘッダーのロゴとナビエリアを横並びに */
header .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

/* ヘッダー　茶蔵ロゴ */
header .logo {
    height: 56px;
}

/* ヘッダー　ナビゲーションを横並びに */
header ul {
    display: flex;
    align-items: center;
}

/* ヘッダー　ナビゲーションのマージン */
header li {
    margin-left: 30px;
}

/* ヘッダー　ナビゲーションのアイコン（Instagram）のサイズ */
header li .nav_icon {
    height: 24px;
}

/* ヘッダー　リンクテキストのお尻に矢印アイコン */
header .link.text::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 0.2em;
}


/* ----------------------------------------
　キービジュアル
---------------------------------------- */
/* キービジュアル */
.key_visual {
    color: #fff;
    background-image: url(../images/sakura_main.jpg);
    background-position: center;
    background-size: cover;
    height: 500px;
    align-items: center;
    display: flex;
}

/* キービジュアルの色を暗くするフィルタ */
.key_visual .filter {
    width: 100%;
    height: 500px;
    background-color: #000;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* キービジュアル　キャッチコピー */
.key_visual p.copy {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 500;
    font-size: clamp(20px, 4vw, 32px);
    word-break: keep-all;
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 2;
    position: absolute;
    z-index: 2;
    position: relative;
    transform: translateY(12px);
}


/* ----------------------------------------
　イントロダクション
---------------------------------------- */
/* イントロダクション　インスタボタン上のキャプション */
.introduction p.go-instagram {
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    margin: 60px 0 10px;
}


/* ----------------------------------------
　お知らせ
---------------------------------------- */
/* お知らせ News 余白の指定　*/
.news {
    margin: 80px 0 120px;
}

/* お知らせ　タイトル */
.news h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    margin-top: 100px;
}

/* お知らせ　英文サブタイトル */
.news p.subtitle {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

/* お知らせ　最大幅の制限とセンター揃え */
.news ul {
    max-width: 700px;
    margin: 0 auto;
}

/* お知らせ　記事のカード */
.news li {
    /* border: solid 1px; */
    background-color: #fff;
    padding: 16px 24px;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* お知らせ　本文テキスト */
.news p {
    font-weight: 500;
    margin-bottom: 12px;
}

/* お知らせ　日付テキスト */
.news .date {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    color: #4b621d;
}


/* ----------------------------------------
　メニュー
---------------------------------------- */
/* メニュー Menu 余白の指定　*/
.menu {
    margin: 80px 0 120px;
}

/* メニュー　タイトル */
.menu h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

/* メニュー　英文サブタイトル */
.menu p.subtitle {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

/* メニュー　メニューセクション全体を中央揃えに */
.menu .container {
    text-align: center;
}

/* メニュー　リード文 */
.menu p.lead {
    margin-bottom: 20px;
}

/* メニュー　メニューブックへのリンク1（ボタン） */
.menu .go-menu_1 {
    margin-top: 20px;
    margin-bottom: 70px;
}

/* メニュー　ジャンル */
.menu h3 {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding: 0.8em 0;
    border-top: solid 2px #3B1705;
    border-bottom: solid 2px #3B1705;
    margin-bottom: 32px;
}

/* メニュー　グリッドレイアウト　枠の設定 */
.menu .grid {
    margin: 0 auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(330px,1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(255px,1fr));
    grid-template-rows: repeat(2, 255px); */
    justify-items: center;
    margin-bottom: 80px;
}

/* メニュー　画像のサイズ固定 */
.menu .grid figure {
    width: 330px;
    height: auto;
    /* place-content: center; */
    /* place-items: center; */
    margin-inline: auto;
}

/* メニュー　グリッドレイアウト　写真メニューのタイトル */
.menu .item p.title {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 16px auto 4px;
}

/* メニュー　グリッドレイアウト　写真メニューの価格 */
.menu .item p.price {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0px auto;
}

/* メニュー　グリッドレイアウト　写真メニューのキャプション */
.menu .caption {
    font-weight: 400;
    text-align: center;
    line-height: 1.5em;
    word-break: keep-all;
    margin: 12px auto;
}

/* メニュー　メニューブックのサムネイルに添える誘導文を中央揃えに */
.menu .lead.center {
    text-align: center;
}

/* メニュー　メニューブックのサムネイル */
.menu img.menu-book-thumbnail {
    margin-bottom: 24px;
    text-align: center;
    transition: .2s;
}

/* メニュー　メニューブックのサムネイル--ホバー */
.menu img.menu-book-thumbnail:hover {
    transform: rotate(-2deg);
    box-shadow: 2px 5px 5px rgba(0,0,0,0.25);
    transition: .2s;
}

/* メニュー　メニューブックへのリンク2（テキスト） */
.menu .go-menu_2 {
    font-weight: 500;
    margin-bottom: 80px;
}

/* メニュー　インスタボタン上のキャプション */
.menu p.go-instagram {
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    margin: 60px 0 10px;
}



/* ----------------------------------------
　アクセス
---------------------------------------- */
/* アクセス　Access 余白の指定 */
.access {
    margin: 80px 0 120px;
}

/* アクセス　タイトル */
.access h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

/* アクセス　英文サブタイトル */
.access p.subtitle {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

/* アクセス　横並び指定 */
.access .row {
    display: flex;
    justify-content: space-between;
}

/* アクセス　店舗情報の幅 */
.access .col.shop_info {
    width: 40%;
}

/* アクセス　マップの幅 */
.access .col.map {
    width: 56%;
}


/* アクセス　外観写真 */
.access img.exterior {
    width: 100%;
    margin-bottom: 16px;
}

/* アクセス　茶蔵ロゴ */
.access .logo {
    height: 80px;
    margin-bottom: 12px;
}

/* アクセス　店名 */
.access h3 {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 4px;
}

/* アクセス　店名のルビ */
.access p.ruby {
    font-size: 0.9em;
    margin-bottom: 12px;
}

/* アクセス　住所 */
.access p.address {
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* アクセス　支払い */
.access p.pay {
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* アクセス　営業時間 */
.access p.hours {
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 10px;
}

/* アクセス　営業時間　白抜き部分 */
.access .outline {
    color: #fff;
    background-color: #3B1705;
    font-size: 0.8em;
    line-height: 1.8em;
    padding: 0 6px 0 6px;
    margin-right: 6px;
    border-radius: 12px;
}

/* アクセス　営業時間の上下を囲むライン */
.access hr {
    border: solid 2px #4b621d;
    margin: 12px 0;
}

/* アクセス　「ご予約はお電話にて承ります」 */
.access p.reserve {
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 4px;
}

/* アクセス　電話番号リンク部分 */
.access a {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    font-size: 2em;
    text-decoration: underline;
}


/* ----------------------------------------
　フッター
---------------------------------------- */
/* フッター */
footer {
    background-color: #3B1705;
    text-align: center;
    color: #fff;
    padding: 24px 0 32px;
}

/* トップへ戻るボタン */
#gotop a {
	display: block;
	position: fixed;
	right: 50px;
	bottom: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	background-color: #F7C1CF;
    transition: 0.6s;
}

/* トップへ戻るボタン--ホバー（拡大＆半透明） */
#gotop a:hover {
    background-color: #F092AB;
    transform: scale(1.1)
}


/* ----------------------------------------
　サブページ 共通
---------------------------------------- */
/* サブページのヘッダー　茶色い帯 */
header.sub-page {
    background-color: #3B1705;
    position: relative;
}

/* サブページのヘッダー　ナビゲーションを横並びに */
.menu-book ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 80px;
    font-weight: 700;
}


/* ----------------------------------------
　サブページ　メニューブック
---------------------------------------- */
/* メニューブック　Menu-book 余白の指定 */
.menu-book {
    margin: 80px 0 120px;
}

/* メニューブック　タイトル */
.menu-book h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

/* メニューブック　英文サブタイトル */
.menu-book p.subtitle {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

/* メニューブック　リード文 */
.menu-book p.lead {
    text-align: center;
}

/* メニューブック　更新日 */
.menu-book p.update {
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 10px;
}

/* メニューブックの種類選択ナビ　下にスペース */
.menu-book nav ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

/* メニューブック画像 */
.menu-book .menu-images {
    display: flex;
    justify-content: center;
    gap: 2%;
    margin-bottom: 20px;
}

.menu-book .menu-images img {
    text-align: center;
    width: 32%;
    margin-bottom: 20px;
}

/* メニューブック　最下部　おすすめメニューへのリンク（ボタン） */
.menu-book .recommend {
    margin-top: 40px;
}








/* ----------------------------------------
　メディアクエリ
---------------------------------------- */
/* メディアクエリ　スマホ表示の指定 */
@media (max-width: 767px) {

/* リード文のテキスト　スマホの時は中央揃えに */
.lead {
    text-align: center;
}

/* コンテナ共通 左右の余白をPCより小さめに */
.container {
    width: min(100% - 2.5rem, 1080px);
    margin-inline: auto;
    position: relative;
}

/* ヘッダー　ロゴとナビゲーションの横並びを解除 */
header .row {
    display: block;
}

/* ヘッダー　ロゴを中央揃えに　上下にマージン */
header h1 {
    text-align: center;
    margin: 20px 0;
}

/* ヘッダー　ナビゲーションを中央揃えに */
header li {
    margin: 0 auto;
}

/* ヘッダー　サブページの茶色ヘッダーの上に隙間ができるのを防ぐ調整 */
header {
    padding: 5px 0 20px;
}

/* キービジュアル　高さ調整 */
.key_visual {
    height: 400px;
}

/* キービジュアルの色を暗くするフィルタ　高さ調整 */
.key_visual .filter {
    height: 400px;
}

/* キャッチコピーの位置調整 */
.key_visual p.copy {
    transform: translateY(40px);
}

/* アクセス　横並びを解除 */
.access .row {
    flex-wrap: wrap;
}

/* アクセス　店舗情報の幅100％ */
.access .col.shop_info {
    width: 100%;
    height: 100%;
    margin-bottom: 40px;
}

/* アクセス　マップの幅100％　高さ指定 */
.access .col.map {
    width: 100%;
    height: 400px;
}

/* トップへ戻るボタン　大きさと位置調整 */
#gotop a {
	right: 20px;
	bottom: 20px;
	width: 48px;
	line-height: 48px;
}

/* メニューブック画像　横並びを解除 */
.menu-book .menu-images {
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* メニューブック画像　幅100％ */
.menu-book .menu-images img {
    width: 100%;
    margin-bottom: 40px;
}

}

/* スマホ以外で見る時は電話番号にリンクしない（アンダーラインも非表示） */
@media (min-width: 768px) {
    a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    }
    }