@charset "utf-8";
/* CSS Document */
html {
    font-family: kan412typos-std, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8em;
}
/*中国語部分のみフォント別指定*/
.zh {
    font-family: hellofont-id-xuanzhensong, serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1em;
    line-height: 1.8em;
}
a {
    text-decoration: none;
    color: #000000;
    display: block;
}
body {
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.wrapper {
    width: 100%;
    overflow: hidden;
}
/*h2タイトルの大きさ統一,emなので中国語フォントは1emでOK
  アクセスとお問い合わせはh2_centerで1.5emにしてます。*/
h1 {
    float: right;
    padding-top: 7px;
    padding-right: 20px;
}
h2 {
    font-size: 2em;
}
h2 .zh {
    font-size: 1em;
}
main {
    overflow: hidden;
}
.loading {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.loading img {
    width: 80px;
    height: 80px;
}
/*--------------------------index.html-------------------------------*/
/*---------ヘッダー--------*/
.js_header {
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    opacity: 0.9;
    position: fixed;
    z-index: 99;
    transition: background-color 0.5s;
}
.nav, .sns {
    display: flex;
    float: right;
    line-height: 70px;
}
/*ナビゲーション*/
.nav {
    width: 60%;
    justify-content: space-around;
}
/*ナビゲーションテキスト*/
.nav {
    font-size: 0.8em;
}
.nav .zh { /*親要素が0.8emなのでここは1emで親要素と同じサイズ*/
    font-size: 1em;
}
/*ナビゲーション横のSNS*/
.sns {
    width: 8%;
    justify-content: space-around;
    padding-top: 5px;
    margin-right: 1%; /*SNS右側の隙間*/
}
.sns li a {
    transition: .3s;
}
.sns li a:hover { /*SNShoverで半透明に*/
    opacity: 0.5;
}
/*ヘッダーナビのリンク装飾*/
.nav li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.nav li a::after {
    position: absolute;
    bottom: 15px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #333;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}
.nav li a:hover::after {
    transform: scale(1, 1);
}
.nav li a:active { /*クリック時に文字色グレー*/
    color: #797979;
}
/*-----------メイン-----------------*/
.fv img {
    width: 100%;
    height: calc(100vh - 150px);
    object-fit: cover;
    background-attachment: fixed;
    vertical-align: bottom;
}
.fv_index img {
    width: 100%;
    height: calc(100vh - 50px);
    object-fit: cover;
    background-attachment: fixed;
}
/*導入*/
.intro {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    margin-top: 150px;
    position: relative;
}
.intro_tx {
    line-height: 2em;
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 30px;
}
/*NEWS*/
.news {
    width: 80%;
    margin: 0 auto;
    margin-top: 150px;
    overflow: hidden;
}
.news p {
    line-height: 2em;
    text-align: center;
    margin-bottom: 20px;
}
.news_title { /*NEWSタイトルグレーのマーカー*/
    width: 100px;
    margin: 0 auto; /*width指定したのでマージン指定しないと中央いかない*/
    background: linear-gradient(transparent 55%, #e0cece 0%);
}
.table_ul {
    width: 60%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
}
.table_ul li {
    text-align: left;
    line-height: 3em;
    border-top: 1px dotted #000000;
    padding-left: 20px;
}
.table_li_last { /*NEWS最後の行のみborder-bottom追加*/
    border-bottom: 1px dotted #000000;
}
/*梅兰茶馆について*/
.about {
    margin-top: 150px;
    width: 90%;
    position: relative;
}
.about_pic {
    margin-left: 5%;
}
.about_pic img {
    width: 55%;
    height: auto;
    margin-top: 5%;
}
.about_h2 {
    position: relative;
    padding-left: 30px; /*左側余白*/
}
.about_h2:before { /*「梅兰茶馆について」直下線*/
    content: "";
    position: absolute;
    top: 60px;
    left: -20px; /*左側余白に合わせ起点-20px左へ*/
    width: 90%;
    height: 1px;
    background-color: #000000;
}
/*お品書き*/
.menu {
    position: relative;
    margin-top: 30%;
    width: 80%;
    float: right;
}
.menu_pic img {
    width: 38%;
    height: auto;
    padding-top: 10%;
    float: right;
    margin-right: 5%;
}
.menu_h2 {
    position: relative;
    padding-right: 30px;
    text-align: right;
}
.menu_h2:before { /*「お品書き」直下線*/
    content: "";
    position: absolute;
    top: 60px;
    right: 0;
    width: 90%;
    height: 1px;
    background-color: #000000;
}
/*アクセス*/
.access {
    width: 600px;
    margin-top: 30px;
    padding-top: 70px;
}
.access ul li {
    line-height: 2em;
}
.access_adress {
    text-align: center;
}
.access_hours {
    margin-top: 25px;
    width: 80%;
    margin: 0 auto;
}
.map {
    margin-top: 25px;
    text-align: center;
    width: 100%;
    height: 250px;
}
.map_box {
    width: 90%;
    margin: 0 auto;
}
/*お問い合わせ*/
.contact {
    width: 600px;
    margin-top: 30px;
    padding-top: 70px;
}
.form {
    width: 500px;
    margin: 0 auto;
}
.contact_table {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.contact_td { /*入力フォーム幅*/
    width: 100%;
    line-height: 1.5em;
}
.contact_th { /*入力フォーム項目の文字幅など*/
    line-height: 1.5em;
    padding-top: 5px;
}
/*送信ボタン*/
.entryBtns input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    margin-top: 20px;
    display: block;
    line-height: 30px;
    border: 1px solid #000000;
    width: 100px;
    height: 30px;
    margin: 40px auto 0;
    background: #ffffff;
    box-shadow: 3px 3px 0 #e02020;
    transition: .5s;
}
.entryBtns input:hover { /*ホバーで右斜め下へ凹む*/
    transform: translate3d(3px, 3px, 0);
    box-shadow: none;
    background: #fff;
}
/*アクセスとお問い合わせを一つに*/
.access_contact {
    clear: both;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 300px;
    position: relative;
    padding-bottom: 30px; /*inputの影出す用*/
}
.h2_center { /*アクセスとお問い合わせh2共通*/
    text-align: center;
    line-height: 2.5em;
    font-size: 1.5em;
    padding-bottom: 30px;
    position: relative;
}
.h2_center:before { /*「アクセス」「お問い合わせ」直下線*/
    content: "";
    position: absolute;
    top: 60px;
    left: 15%;
    width: 70%;
    height: 1px;
    background-color: #000000;
}
/*----------------フッター---------------*/
footer {
    width: 100%;
    height: 110px;
    background-color: #af0b0b;
    margin-top: 350px;
    position: relative; /*上に戻るボタンフッター前で止めるために必須*/
}
footer p {
    color: #ffffff;
    text-align: center;
    font-size: 0.7em;
    line-height: 1.5em;
}
.ft_p_top {
    padding-top: 60px;
}
/*もっと知るボタン*/
.more {
    display: block;
    text-align: center;
    line-height: 40px;
    border: 1px solid #000000;
    width: 180px;
    height: 40px;
    margin: 40px auto 0;
    background: #ffffff;
    box-shadow: 4px 4px 0 #e02020;
    transition: .5s;
}
.more:hover { /*ホバーで右斜め下へ凹む*/
    transform: translate3d(4px, 4px, 0);
    box-shadow: none;
    background: #fff;
}
.more_about {
    float: right;
    margin-top: 10%;
}
.more_menu {
    float: right;
    clear: both;
    margin-right: 13%;
    margin-top: 10%;
}
/*-------★↓index.html背景レイアウトここから↓★-----------*/
.logo { /*fv_areaでrelative*/
    position: absolute;
    top: 32%;
    left: 47%;
}
.logo img {
    width: 50%;
    height: auto;
}
.ume01 { /*introでrelative*/
    width: 80%;
    height: auto;
    position: absolute;
    top: -100px;
    right: -30%;
    z-index: -1;
}
.logo_toumei { /*.aboutでrelative*/
    position: absolute;
    top: 28%;
    left: 85%;
    z-index: -1;
}
.logo_toumei img {
    width: 70%;
    height: auto;
    opacity: 0.5;
}
.top_text01 { /*.aboutでrelative ①不风不雨正晴和*/
    position: absolute;
    top: 80%;
    left: -25%;
    z-index: -2; /*.logo_toumeiの下に表示されるように*/
}
.top_text01 img {
    width: 180%;
    height: auto;
}
.top_text02 { /*.aboutでrelative ②翠竹亭亭好节柯*/
    position: absolute;
    top: 140%;
    right: -25%;
    z-index: -3; /*.top_text01の下に表示されるように*/
}
.top_text02 img {
    width: 80%;
    height: auto;
}
.top_text0304 { /*.menuでrelative ③最爱晚凉佳客至④一壶新茗泡松萝*/
    position: absolute;
    top: 15%;
    left: 0;
    z-index: -1;
}
.top_text0304 img {
    width: 55%;
    height: auto;
}
.ume02 { /*.menuでrelative*/
    position: absolute;
    top: 60%;
    left: -35%;
    z-index: -1;
}
.ume02 img {
    width: 77%;
    height: auto;
}
.top_text05 { /*.access_hoursでrelative ⑤正好清明连谷雨*/
    position: absolute;
    top: -10%;
    left: -6%;
    z-index: -10;
}
.top_text05 img {
    width: 55%;
    height: auto;
}
.top_text06 { /*.access_hoursでrelative ⑥几枝新叶萧萧竹数笔横皴淡淡山*/
    position: absolute;
    bottom: 2%;
    right: -50%;
    z-index: -10;
}
.top_text06 img {
    width: 55%;
    height: auto;
}
.top_text07 { /*footerでrelative ⑦一杯香坐其间*/
    position: absolute;
    top: -250%;
    z-index: -15;
}
.top_text07 img {
    width: 100%;
    height: auto;
}
.tx_opc { /*漢詩の不透明度調整*/
    opacity: 0.5;
}
/*------★↑index.html背景レイアウトここまで↑★-------------*/
/*上に戻るボタン*/
#page-top {
    position: fixed;
    width: 50px;
    height: 50px;
    right: 10px;
    bottom: 30px;
    background-color: rgba(255, 255, 255, 0.7); /*上に戻るボタン背景*/
    border: 1px solid #e02020; /*上に戻るボタン線*/
    border-radius: 50%;
    z-index: 99;
}
#page-top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}
#page-top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #e02020; /*上に戻るボタン＾の色*/
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
/*ファーストビュースクロール促す*/
/*スクロールダウン全体の場所*/
.fv_area {
    position: relative;
}
.scrolldown1 {
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    right: 50px;
    bottom: 60px;
    /*全体の高さ*/
    height: 50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span {
    /*描画位置*/
    position: absolute;
    left: -5px;
    top: -40px;
    /*テキストの形状*/
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
}
/* 線の描写 */
.scrolldown1::after {
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 5px;
    background: #fff;
    /*線の動き2.5秒かけて動く。永遠にループ*/
    animation: pathmove 2.5s ease-in-out infinite;
    opacity: 0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        height: 0;
        top: 0;
        opacity: 0;
    }
    30% {
        height: 50px;
        opacity: 1;
    }
    100% {
        height: 0;
        top: 100px;
        opacity: 0;
    }
}
/*--------★↓ハンバーガーメニューここから↓★------------*/
header #navi {
    transition: all .6s;
    overflow-y: auto;
    padding-top: 40px;
    width: 300px; /*ナビの背景*/
    height: 100vh;
    z-index: 200;
    top: 0;
    right: -320px;
    background-color: #fff;
    position: fixed;
}
/*メニュー内テキストリンクレイアウト*/
header #navi li a {
    display: inline-block;
    width: 200px; /*ここでactive時のborder幅同じにしてる*/
    color: #000;
    font-size: 18px;
    line-height: 3em;
    padding: 0 5px;
    margin-left: 20px;
    border-bottom: 1px solid #fff;
    transition: 0.3s;
    position: relative;
    box-sizing: border-box;
}
header #hbg_wrap #navi li a:active { /*クリック時に文字色グレー*/
    color: #ccc; /*通常ナビより薄いグレー*/
}
header #hbg_wrap #navi li.bd a:active { /*クリック字に下線*/
    border-bottom: 1px solid #000;
}
.hbg_sns a:active { /*SNShoverで半透明に*/
    opacity: 0.5;
}
header .nav_btn {
    width: 44px;
    height: 44px;
    z-index: 99;
    top: 7px;
    right: 7px;
    cursor: pointer;
    background: #e02020;
    position: absolute;
    position: fixed;
}
.hamburger_line { /*アイコン三本線のレイアウト*/
    transition: all .6s;
    width: 28px;
    height: 2px;
    left: 8px;
    background-color: #fff;
    position: absolute;
}
.hamburger_line1 {
    top: 10px;
}
.hamburger_line2 {
    top: 21px;
}
.hamburger_line3 {
    top: 32px;
}
.nav_bg { /*ナビゲーション開いたと時の半透明の背景*/
    opacity: 0;
    transition: all .6s;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    top: 0;
    left: 0;
    visibility: hidden;
    background-color: rgba(224, 206, 206, 0.6);
    cursor: pointer;
    position: fixed;
}
/* 表示された時用のCSS */
.nav_open header #navi {
    right: 0;
}
.nav_open .nav_bg {
    opacity: .8;
    visibility: visible;
}
.nav_open .hamburger_line1 {
    transform: rotate(45deg);
    top: 20px;
}
.nav_open .hamburger_line2 {
    width: 0;
    left: 50%;
}
.nav_open .hamburger_line3 {
    transform: rotate(-45deg);
    top: 20px;
}
a {
    text-decoration: none;
}
/*-------★↑ハンバーガーメニューここまで↑★----------*/
/*-------------------------------------------about.html---------------------------------------*/
/*------------メイン--------------*/
.fv_text { /*FV上のテキスト*/
    position: absolute;
    top: 100px;
    left: 5%;
    color: #fff;
}
.fv_text p:first-child {
    font-size: 2em;
    width: 150%;
    border-bottom: 1px solid #fff;
}
.fv_text p .zh:first-child {
    font-size: 1em;
}
/*導入*/
.about_intro {
    width: 100vw;
    margin: 0 auto;
    text-align: left;
    margin-top: 450px;
    position: relative;
}
.about_intro_tx {
    line-height: 2.5em;
    background-color: rgba(255, 255, 255, 0.9);
    padding-left: 10%;
    padding-top: 25px;
    padding-bottom: 30px;
}
.tate_text { /*テキスト縦書き用のclass*/
    -ms-writing-mode: tb-rl; /*IE用*/
    writing-mode: vertical-rl;
}
.about_tate01 { /*すべてはとある茶館から*/
    position: absolute;
    font-size: 2em;
    top: -450px;
    right: 25%;
    background-color: #e0cece;
    line-height: 1.5em;
    padding-top: 200px;
    padding-bottom: 20px;
}
.about_tate01:before { /*すべてはとある茶館から上の線*/
    content: "";
    /*描画位置*/
    position: absolute;
    top: 12px;
    left: 26px;
    /*線の形状*/
    width: 1px;
    height: 170px;
    background: #000;
}
.shop_pic {
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-top: 350px;
}
.shop_pic img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    z-index: 100;
}
.about_text01 { /*あなただけの安らぎの空間を～*/
    float: right;
    line-height: 2.5em;
    margin-right: 10%;
    margin-top: 100px;
}
.about_text01 p { /*あなただけの安らぎの空間を～テキスト*/
    padding-left: 30px;
}
.about_h201 { /*あなただけの安らぎの空間を～タイトル*/
    display: inline-block;
    margin-top: 20px;
    position: relative;
}
.about_h201:before { /*あなただけの安らぎの空間を～タイトル下線*/
    content: "";
    position: absolute;
    top: 55px;
    right: 0; /*左側余白に合わせ起点-20px左へ*/
    width: 200%;
    height: 1px;
    background-color: #000000;
}
.about_text02 { /*本当に、美味しいものだけ~*/
    clear: both;
    position: relative;
    padding-top: 300px;
    line-height: 2.5em;
}
.about_h202 { /*本当に、美味しいものだけ~タイトル*/
    position: absolute;
    top: 20%;
    left: 5%;
    line-height: 1.5em;
    -ms-writing-mode: tb-rl; /*IE用*/
    writing-mode: vertical-rl;
    background-color: rgba(255, 255, 255, 0.8);
    padding-top: 25px;
    padding-bottom: 30px;
}
.about_h202:before { /*本当に、美味しいものだけ~タイトル上の線*/
    content: "";
    /*描画位置*/
    position: absolute;
    top: -50px;
    /*線の形状*/
    width: 1px;
    height: 150px;
    background: #000;
}
.about_text02 p:first-of-type { /*本当に、美味しいものだけ~テキスト*/
    padding-left: 15%;
}
.about_text02 p:nth-of-type(2) img { /*本当に、美味しいものだけ~画像*/
    width: 50%;
    height: auto;
    padding-top: 20px;
}
.about_text03 { /*甜点にもこだわりあり～*/
    margin-top: 300px;
    margin-left: 10%;
    line-height: 2.5em;
}
.about_h203 { /*甜点にもこだわりあり～タイトル*/
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    max-width: 410px;
}
.about_h203:before { /*甜点にもこだわりあり～タイトル下線*/
    content: "";
    position: absolute;
    top: 60px;
    left: -50px;
    width: 200px;
    height: 1px;
    background-color: #000000;
}
.about_text03 img { /*甜点にもこだわりあり～写真*/
    width: 50%;
    height: auto;
    padding-top: 20px;
    float: right;
}
.about_text03 p:nth-of-type(1) { /*甜点にもこだわりあり～テキスト*/
    float: left;
    padding-top: 10%;
}
.about_text03_p_img { /*甜点にもこだわりあり~画像とテキストひとつに*/
    width: 100%;
    margin-top: 30px;
}
.about_text04 { /*鄭燮は中国清代の文人の一人～*/
    clear: both;
    display: inline-block;
    margin-top: 300px;
    line-height: 2.5em;
    /*	background: pink;*/
}
.about_h204 { /*鄭燮は中国清代の文人の一人～タイトル*/
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    max-width: 410px;
    border-bottom: 1px #000 solid;
    margin: 0 auto;
    line-height: 1.8em;
    text-align: center;
}
.about_teishou {
    margin-top: 50px;
    margin-bottom: 50px;
}
.about_text04_p_img { /*鄭燮は中国清代の文人の一人~画像とテキストひとつに*/
    width: 95%;
    margin-top: 30px;
    margin: 0 auto;
    text-align: center;
    /*	background: red;*/
}
.about_text04 img { /*鄭燮は中国清代の文人の一人～写真*/
    width: 90%;
    height: auto;
    padding-top: 20px;
    text-align: center;
}
.kanshi {
    color: #000;
    font-size: 1.5em;
}
.kanshi_yaku {
    color: #b69595;
    padding-bottom: 40px;
}
.kanshi_back {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #000;
    width: 95%;
    height: auto;
    margin: 0 auto;
	padding-top: 50px;
    margin-bottom: 50px;
}
.kanshi_img img {
    width: 80%;
    height: auto;
}
/*背景画像*/
.about_ume01 { /*.about_introでrelative*/
    position: absolute;
    top: -350px;
    right: -80%; /*PC*/
    z-index: -10;
}
.about_ume01 img {
    width: 50%; /*PC*/
    height: auto;
}
.about_ume02 { /*.about_introでrelative*/
    position: absolute;
    bottom: 41%;
    left: -10%;
    z-index: -10;
}
.about_ume02 img {
    width: 120%; /*PC*/
    height: auto;
}
.about_logo { /*.aboutでrelative*/
    position: absolute;
    top: -7%;
    left: 20%;
    z-index: -1;
}
.about_logo img {
    width: 55%;
    height: auto;
}
/*-------------------------------------------·menu.html---------------------------------------*/
.Menu { /*茶と甜点両方入れる箱*/
    width: 100%;
    margin-top: 10%;
}
.Menu_title { /*ファーストビュータイトル*/
    font-size: 18px;
    line-height: 1em;
    margin-top: 10px;
    padding-bottom: 25px;
}
.tea { /*茶*/
    width: 90%;
    margin: 0 auto;
}
.tea_contents { /*茶中身*/
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #000;
    margin-top: 50px;
}
.Menu_h2 { /*茶と甜点タイトル*/
    position: relative;
    text-align: center;
    padding-bottom: 10px;
    font-size: 2em;
    width: 20%;
    border-bottom: 1px solid #000;
    margin: 0 auto;
}
.Menu_h2_under { /*茶とt甜品下のテキスト*/
    text-align: center;
    line-height: 1.5em;
}
.green_tea { /*緑茶*/
    position: relative;
    width: 75%;
    margin: 50px auto;
    padding: 50px 0;
    border-bottom: 1px dotted #000;
}
.wolong_tea { /*烏龍茶*/
    position: relative;
    width: 75%;
    margin: 50px auto;
    padding: 50px 0;
    border-bottom: 1px dotted #000;
}
.hua_tea { /*花茶*/
    position: relative;
    width: 75%;
    margin: 50px auto;
    padding: 50px 0;
}
.Menu_h3 {
    position: absolute;
    top: 20px;
    left: 0;
}
.Menu_h3 img { /*茶の種類タイトル*/
    width: 40%;
    height: auto;
}
.Menu_tb { /*茶料金表テーブル*/
    margin: 0 auto;
    width: 70%;
    border-collapse: separate; /*テーブルの列隙間開ける*/
    border-spacing: 0px 50px; /*左が縦・右が列の隙間調整*/
}
.Menu_tb tr {
    padding-bottom: 100px;
}
.Menu_tb th {
    line-height: 1.5em;
    text-align: left;
    padding-left: 1em; /*全体のpaddiingを1em*/
    text-indent: -1em; /*１行目だけ1em分左に戻す*/
}
.attention { /*メニュー下部の注意事項*/
    text-align: center;
    font-size: 0.8em;
    padding-bottom: 40px;
}
.Menu_sweets {
    margin-top: 100px;
}
.sweets { /*甜点*/
    width: 90%;
    margin: 0 auto;
}
.sweets_cap {
    caption-side: bottom;
    text-align: center;
    font-size: 0.9em;
}
.sweets_contents { /*甜点中身*/
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #000;
    margin-top: 50px;
}
.sweets_tb {
    margin-bottom: 100px;
}
.sweets_sp_tb {
    margin-top: 100px;
}
/*背景*/
.back_wrapper { /*背景位置用のdiv*/
    position: relative;
}
.menu_ume01 { /*上の方の梅*/
    position: absolute;
    top: 15%;
    left: -60%;
    z-index: -10;
}
.menu_ume01 img { /*上の方の梅　画像*/
    width: 100%;
    height: auto;
}
.menu_ume02 { /*下の方の梅*/
    position: absolute;
    bottom: 0;
    ;
    right: -20%;
    z-index: -10;
}
.menu_ume02 img { /*上の方の梅　画像*/
    width: 120%;
    height: auto;
}
/*--------------------------------- メディアクエリー --------------------------------------*/
@media screen and (min-width: 769px) { /*PC*/
    #hbg_wrap, .br_sumaho { /*ハンバーガーメニューとスマホ改行消す*/
        display: none;
    }
    .more_menu {
        float: right;
        clear: both;
        margin-top: 10%;
        margin-left: 30%;
    }
}
@media screen and (max-width: 1500px) { /*about背景梅の画像調整用*/
    /*about.html*/
    .about_ume01 { /*.about_introでrelative*/
        position: absolute;
        top: -330px;
        right: -50%;
        z-index: -1;
    }
    .about_ume01 img {
        width: 80%;
        height: auto;
    }
    .logo { /*fv_areaでrelative*/
        position: absolute;
        top: 32%;
        left: 45%;
        transform: unset;
    }
}
@media screen and (max-width: 768px) { /*タブレット*/
    .js_header { /*通常ヘッダーとスマホ改行消す*/
        display: none;
    }
    /*-----------index.html--------------*/
    .logo { /*fv_areaでrelative*/
        position: absolute;
        top: 30%;
        left: 43%;
        transform: unset;
    }
    .loading {
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .loading img {
        width: 80px;
        height: 80px;
        position: fixed;
        top: 40%;
    }
    .intro {
        width: 80%;
    }
    /*news*/
    .news {
        width: 80%;
    }
    .table_ul {
        width: 75%;
    }
    .about_pic img {
        width: 80%;
        height: auto;
        margin-top: 5%;
    }
    .menu_pic img {
        width: 70%;
        height: auto;
        padding-top: 10%;
        float: right;
        margin-right: 5%;
    }
    footer {
        width: 100%;
        height: 110px;
        background-color: #af0b0b;
        margin-top: 200px;
        position: relative; /*上に戻るボタンフッター前で止めるために必須*/
    }
    /*背景画像*/
    .about_logo { /*.aboutでrelative*/
        position: absolute;
        top: -7%;
        left: 20%;
        z-index: -1;
    }
    .about_logo img {
        width: 50%;
        height: auto;
    }
    .top_text02 { /*.aboutでrelative ②翠竹亭亭好节柯*/
        position: absolute;
        top: 125%;
        right: -25%;
        z-index: -3; /*.top_text01の下に表示されるように*/
    }
    .top_text02 img {
        width: 80%;
        height: auto;
    }
    .ume02 { /*.menuでrelative*/
        position: absolute;
        top: 60%;
        left: -50%;
        z-index: -10;
    }
    .ume02 img { /*.menuでrelative*/
        width: 100%;
        height: auto;
    }
    .top_text07 { /*footerでrelative ⑦一杯香坐其间*/
        position: absolute;
        top: -150%;
        z-index: -10;
    }
    .top_text07 img {
        width: 100%;
        height: auto;
    }
    .top_text05 { /*.access_hoursでrelative ⑤正好清明连谷雨*/
        position: absolute;
        top: 3%;
        left: -10%;
        z-index: -10;
    }
    /*-----------about.html--------------*/
    .about_text03 img { /*甜点にもこだわりあり～写真*/
        width: 50%;
        height: auto;
        padding-top: 20px;
        float: right;
    }
    .about_text03 p:nth-of-type(1) { /*甜点にもこだわりあり～テキスト*/
        float: left;
        padding-top: 0;
    }
    .about_tate01 { /*すべてはとある茶館から*/
        position: absolute;
        font-size: 2em;
        top: -450px;
        right: 15%;
        background-color: #e0cece;
        line-height: 1.5em;
        padding-top: 200px;
        padding-bottom: 20px;
    }
    .about_text02 p:nth-of-type(2) img { /*本当に、美味しいものだけ~画像*/
        width: 70%;
        height: auto;
        padding-top: 20px;
    }
    .about_text03 img { /*甜点にもこだわりあり～写真*/
        width: 70%;
        height: auto;
        padding-top: 20px;
        float: right;
    }
    .about_h204 { /*鄭燮は中国清代の文人の一人～タイトル*/
        position: relative;
        background: rgba(255, 255, 255, 0.2);
        max-width: 80%;
        border-bottom: 1px #000 solid;
        margin: 0 auto;
        text-align: center;
    }
    .kanshi_back {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #000;
        width: 90%;
        height: auto;
        margin: 0 auto;
		padding-top: 50px;
        margin-bottom: 50px;
    }
    /*背景画像*/
    .about_ume01 { /*.about_introでrelative*/
        position: absolute;
        top: -450px;
        right: -100%;
        z-index: -1;
    }
    .about_ume01 img {
        width: 65%;
        height: auto;
    }
    .about_ume02 { /*.about_introでrelative*/
        position: absolute;
        bottom: 50%;
        left: -20%;
        z-index: -10;
    }
    .about_ume02 img {
        width: 130%; /*PC*/
        height: auto;
    }
    /*-------------menu.html--------------------*/
    .menu_ume01 { /*上の方の梅*/
        position: absolute;
        top: 23%;
        left: -60%;
        z-index: -10;
    }
    .menu_ume01 img { /*上の方の梅　画像*/
        width: 120%;
        height: auto;
    }
    .menu_ume02 { /*下の方の梅*/
        position: absolute;
        bottom: 5%;
        right: -20%;
        z-index: -10;
    }
    .menu_ume02 img { /*上の方の梅　画像*/
        width: 150%;
        height: auto;
    }
}
@media screen and (max-width: 520px) { /*スマホ*/
    /*-------------index.html--------------------*/
    .sumaho_fs, .sumaho_fs .zh {
        font-size: 16px;
    }
    .sumaho_fs_14, .sumaho_fs_14 .zh {
        font-size: 14px;
    }
    .sumaho_fs_13, .sumaho_fs_13 .zh {
        font-size: 13px;
    }
    .sumaho_fs_24, .sumaho_fs_24 .zh {
        font-size: 24px;
    }
    .sumaho_fs_22, .sumaho_fs_22 .zh {
        font-size: 22px;
    }
    .intro {
        width: 95%;
    }
    .logo { /*fv_areaでrelative*/
        position: absolute;
        top: 20%;
        /*        left: 40%;*/
        left: 38%;
        transform: unset;
    }
    .loading {
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .loading img {
        width: 80px;
        height: 80px;
        position: fixed;
        top: 40%;
    }
    /*news*/
    .news {
        width: 80%;
    }
    .table_ul {
        width: 90%;
    }
    .sumaho_about_h2, .sumaho_menu_h2, .sumaho_about_h2 .zh { /*indxのh2*/
        font-size: 26px;
    }
    .sumaho_about_h2, .sumaho_menu_h2 { /*indxのh2*/
        padding-left: 20px;
    }
    .sumaho_about_h2:before { /*「梅兰茶馆について」直下線*/
        content: "";
        position: absolute;
        top: 40px;
        left: -20px; /*左側余白に合わせ起点-20px左へ*/
        width: 90%;
        height: 1px;
        background-color: #000000;
    }
    .about_pic img {
        width: 80%;
        height: auto;
        margin-top: 5%;
    }
    .menu_pic img {
        width: 65%;
        height: auto;
        padding-top: 10%;
        float: right;
        margin-right: 5%;
    }
    .sumaho_menu_h2:before { /*「お品書き」直下線*/
        content: "";
        position: absolute;
        top: 35px;
        right: 0;
        width: 90%;
        height: 1px;
        background-color: #000000;
    }
    /*お問い合わせアクセス共通*/
    .access_contact {
        clear: both;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding-top: 50px;
        position: relative;
        padding-bottom: 30px; /*inputの影出す用*/
    }
    /*お問い合わせフォーム*/
    .form {
        width: 500px;
        margin: 0 auto;
    }
    .contact_table {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    .contact_td { /*入力フォーム幅*/
        width: 95%;
        line-height: 1.5em;
    }
    footer {
        margin-top: 80px;
    }
    /*背景画像*/
    .top_text02 { /*.aboutでrelative ②翠竹亭亭好节柯*/
        position: absolute;
        top: 128%;
        right: -25%;
        z-index: -3; /*.top_text01の下に表示されるように*/
    }
    .top_text02 img {
        width: 80%;
        height: auto;
    }
    .top_text0304 { /*.menuでrelative ③最爱晚凉佳客至④一壶新茗泡松萝*/
        position: absolute;
        top: 20%;
        left: -10%;
        z-index: -1;
    }
    .top_text0304 {
        width: 50%;
        height: auto;
    }
    .ume02 { /*.menuでrelative*/
        position: absolute;
        top: 60%;
        left: -50%;
        z-index: -10;
    }
    .ume02 img { /*.menuでrelative*/
        width: 100%;
        height: auto;
    }
    .top_text05 { /*.access_hoursでrelative ⑤正好清明连谷雨*/
        position: absolute;
        top: 6%;
        left: -10%;
        z-index: -10;
    }
    .top_text05 img {
        width: 35%;
        height: auto;
    }
    .top_text06 { /*.access_hoursでrelative ⑥几枝新叶萧萧竹数笔横皴淡淡山*/
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -10;
    }
    .top_text06 img {
        width: 70%;
        height: auto;
    }
    .top_text07 { /*footerでrelative ⑦一杯香坐其间*/
        position: absolute;
        top: -50%;
        z-index: -10;
    }
    .top_text07 img {
        width: 100%;
        height: auto;
    }
    /*-------------------------about.html----------------------------------*/
    .fv_text p:first-child {
        font-size: 1.5em;
        width: 120%;
        border-bottom: 1px solid #fff;
    }
    .about_tate01 { /*すべてはとある茶館から*/
        position: absolute;
        font-size: 20px;
        top: -250px;
        right: 15%;
        background-color: #e0cece;
        line-height: 1.5em;
        padding-top: 50px;
        padding-bottom: 10px;
    }
    .about_tate01:before { /*すべてはとある茶館から上の線*/
        content: "";
        /*描画位置*/
        position: absolute;
        top: 5px;
        left: 15px;
        /*線の形状*/
        width: 1px;
        height: 40px;
        background: #000;
    }
    /*導入*/
    .about_intro {
        width: 100vw;
        margin: 0 auto;
        text-align: left;
        margin-top: 250px;
        position: relative;
    }
    .shop_pic {
        width: 100%;
        height: auto;
        margin: 0 auto;
        margin-top: 100px;
    }
    .shop_pic img {
        width: 150%;
        height: auto;
        display: block;
        margin: 0 auto;
        z-index: 100;
    }
    .about_text02 { /*本当に、美味しいものだけ~*/
        clear: both;
        position: relative;
        padding-top: 200px;
        line-height: 2.5em;
    }
    .about_h202 { /*本当に、美味しいものだけ~タイトル*/
        position: absolute;
        top: 35%;
        left: 5%;
        line-height: 1.5em;
        -ms-writing-mode: tb-rl; /*IE用*/
        writing-mode: vertical-rl;
        background-color: rgba(255, 255, 255, 0.8);
        padding-top: 25px;
        padding-bottom: 30px;
    }
    .about_h202:before { /*本当に、美味しいものだけ~タイトル上の線*/
        content: "";
        /*描画位置*/
        position: absolute;
        top: -50px;
        /*線の形状*/
        width: 1px;
        height: 150px;
        background: #000;
    }
    .about_text02 p:first-of-type { /*本当に、美味しいものだけ~テキスト*/
        padding-left: 30%;
    }
    .about_text02 p:nth-of-type(2) img { /*本当に、美味しいものだけ~画像*/
        width: 100%;
        height: auto;
        padding-top: 20px;
    }
    .about_text03 img { /*甜点にもこだわりあり～写真*/
        width: 80%;
        height: auto;
        padding-top: 20px;
        float: right;
    }
    .about_h201:before { /*あなただけの安らぎの空間を～タイトル下線*/
        content: "";
        position: absolute;
        top: 42px;
        right: 0; /*左側余白に合わせ起点-20px左へ*/
        width: 200%;
        height: 1px;
        background-color: #000000;
    }
    .about_h203:before { /*甜点にもこだわりあり～タイトル下線*/
        content: "";
        position: absolute;
        top: 42px;
        left: -50px;
        width: 200px;
        height: 1px;
        background-color: #000000;
    }
    /*背景画像*/
    .about_logo { /*.aboutでrelative*/
        position: absolute;
        top: -5%;
        left: 20%;
        z-index: -1;
    }
    .about_logo img {
        width: 30%;
        height: auto;
    }
    .about_ume01 { /*.about_introでrelative*/
        position: absolute;
        top: -180px;
        right: -120%;
        z-index: -1;
    }
    .about_ume01 img {
        width: 100%;
        height: auto;
    }
    .about_ume02 { /*.about_introでrelative*/
        position: absolute;
        bottom: 53%;
        left: -70%;
        z-index: -10;
    }
    .about_ume02 img {
        width: 130%;
        height: auto;
    }
    .kanshi_back {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #000;
        width: 80%;
        height: auto;
        margin: 0 auto;
		padding-top: 50px;
        margin-bottom: 50px;
    }
    .kanshi_img img {
        width: 100%;
        height: auto;
    }
    /*-------------------------menu.html----------------------------------*/
    .Menu_tb { /*茶とスイーツ料金表テーブル*/
        margin: 0 auto;
        width: 80%;
        border-collapse: separate; /*テーブルの列隙間開ける*/
        border-spacing: 0px 50px; /*左が縦・右が列の隙間調整*/
    }
    .Menu_tb_tea {
        width: 90%;
    }
    .sumaho_tea { /*茶の幅*/
        width: 90%;
    }
    .sumaho_Menu_h3 {
        opacity: 0.8;
        position: absolute;
        top: -35px;
        left: 5px;
    }
    .sumaho_Menu_h3_gt { /*緑茶２文字なので位置調整ここで別に*/
        opacity: 0.8;
        position: absolute;
        top: -15px;
        left: 5px;
    }
    .sumaho_Menu_h3 img, .sumaho_Menu_h3_gt img {
        width: 30%;
        height: auto;
    }
    .attention {
        display: block;
        width: 300px;
        text-align: left;
        margin: 0 auto;
    }
    .Menu_h2 { /*茶と甜点タイトル*/
        position: relative;
        text-align: center;
        padding-bottom: 10px;
        font-size: 2em;
        width: 25%;
        border-bottom: 1px solid #000;
        margin: 0 auto;
    }
    .Menu_sweets { /*甜点の上の隙間*/
        margin-top: 100px;
    }
    .sweets_sp_tb { /*captionとtrの隙間を小さく調整。その分marginで上に余白作る。*/
        border-spacing: 0px 20px; /*左が縦・右が列の隙間調整*/
        margin-top: 50px;
    }
    .sweets_tb { /*caption対策でスイーツ盛り合わせの隙間狭くなったのでここでプラス。*/
        margin-top: 20px;
    }
    .Menu_title { /*ファーストビュータイトル*/
        font-size: 18px;
        line-height: 0.8em;
        margin-top: 10px;
        padding-bottom: 15px;
    }
    /*-------------menu.html--------------------*/
    .menu_ume01 { /*上の方の梅*/
        position: absolute;
        /*        top: 23%;*/
        top: 17%;
        left: -60%;
        z-index: -10;
    }
    .menu_ume01 img { /*上の方の梅　画像*/
        width: 120%;
        height: auto;
    }
    .menu_ume02 { /*下の方の梅*/
        position: absolute;
        bottom: 14%;
        right: -20%;
        z-index: -10;
    }
    .menu_ume02 img { /*上の方の梅　画像*/
        width: 150%;
        height: auto;
    }
}
@media screen and (max-width: 480px) { /*スマホ②*/
    .logo { /*fv_areaでrelative*/
        position: absolute;
        top: 30%;
        left: 40%;
        transform: unset;
    }
}