/*
Theme Name: Pcure Custom Theme
Theme URI: https://p-cure-kirei.net/
Author: Pcure
Description: 池田市エステサロン ピーキュア 移行用カスタムテーマ (旧MODXサイトのデザインを再現)
Version: 2.9.42
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pcure
*/

/*
Changelog:
2.6 - お問い合わせフォームの「ご連絡先」欄だけ枠線が太い黒になっていた問題を修正
2.5 - PCグローバルメニューの区切り線が長く/余計に見えていた問題と、
      「お客様の声」だけ文字色が違っていた問題を修正
2.4 - スクロールアップ時に上部メニューをスライド表示する機能を追加
      (スマホ幅はヘッダー、PCはグローバルメニューバーが対象。下スクロール中は隠れる)
2.3 - スマホ用ハンバーガーメニューが動かなかった問題を修正
      (元テンプレート末尾のtoggleNav()スクリプトの移植漏れ。footer.phpに追加。
       黒い背景タップで閉じない元のバグも修正)
2.2 - PC表示でFV画像を118%に拡大・右端基準にし、人物を左へ寄せて本文と重ならないように
2.1 - FV画像の頭が切れないよう上基準(center top)に変更。標準画像を新写真(v01)に差替。
      PCのグローバルメニューが2段になっていたのを、幅を広げて1段・中央寄せに
2.0 - FVを参考サイト(#about-bg/#about-mask/#about-text)の実測値に合わせて再構成。
      最初の1画面は画像のみ(マスク透明)、本文が入ってきたらマスクが0.7秒で
      暗くなる(参考のduration-700相当)。本文は右寄せ・py200px・見出し40px・
      本文20px/行間2。テキストはフェードさせず物理的にせり上がる(パラパックス)
1.9 - スクロール連動のJSフェード(フェードインぽく見えてしまっていた)を削除。
      参考サイトのCSSを確認し、常時一定の暗さのフィルター＋sticky方式のみの
      シンプルな構成に戻した(本文パネルが物理的にスクロールで重なってくる、
      純粋なパラパックス)
1.8 - FVにスクロール連動の演出を追加: 最初は画像そのまま(明るい)・テキスト透明、
      スクロールするほど画像が暗くなりテキストが浮かび上がるように(小さなJS制御)
1.7 - FVの見た目を調整: 白い板で覆う方式から、画像を暗くしてその上に
      白文字を乗せる方式に変更(参考サイトのスタイルに近づけた)。文字を
      大きく、画像だけの時間を短縮してテキストが早めに重なるように
1.6 - FVの実装方式を全面変更。position:fixed+z-index方式(ページ全体に影響し
      不具合が続いた)から、position:sticky方式(.pcure-fvセクション内で完結、
      ページの他の部分に一切影響しない)に変更
1.5 - #wrapperがfloatで高さが潰れ、白背景がほぼ効いていなかった問題を修正
      (clearfixを追加し、正しく高さを確保)
1.4 - FVより下（#wrapper, #footer）で固定画像が透けて見え続ける問題を修正
      (背景色を明示して、FVセクションを過ぎたら完全に隠れるように)
1.3 - FV画像が表示されない問題を修正
      (bodyの白背景の奥にz-indexで埋もれていたため、重なり順を修正)
1.2 - FV画像URLがhttpのまま保存されているとhttpsページでブロックされる問題を修正
      (常にhttpsへ自動変換するように)
1.1 - トップページFV(ファーストビュー)機能を追加(画像固定+テキストスクロール、外観>カスタマイズから編集可)
      FV用写真を調整(不要な人物・柱を除去)
      FVの文章を「無理なく続けられる」路線に全面改訂
      CSS/JSのバージョンをファイル更新日時から自動算出する方式に変更(キャッシュ対策)
1.0 - MODXサイトからの移行、初回リリース
*/

@charset "utf-8";:focus,a,a:active,a:hover{outline:0}#footer,#header h2,#header .pcure-logo{padding-top:20px;clear:both}#headerInfo,caption,td,th{text-align:left}#footer ul li a,#header{overflow:hidden}#copyright,#footer,#header h2,#mainNav:after,#pageLinks,.news p,.newsTitle,.newsTitle:after,.pagenav,.post blockquote,.widget h3,h2.title,nav .panel:after,#header .pcure-logo,.widget .widget-title{clear:both}a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,td,th{font-weight:400}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote,q{quotes:"" ""}a img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font:14px verdana,"Lucida Sans Unicode","Lucida Grande",Arial,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",HGS明朝E,"ＭＳ Ｐ明朝";color:#252525;line-height:1.5;background:#fff;-webkit-text-size-adjust:none}html{background:#fff}a{margin:0;padding:0;text-decoration:none;vertical-align:baseline;background:0 0;font-size:100%;color:#805B2D}a:active,a:hover{-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;color:#777}#mainNav:after,#mainNav:before,.nav .panel:before,.newsTitle:after,.newsTitle:before,nav .panel:after{content:"";display:table}#mainNav,.newsTitle,nav .panel{zoom:1}input[type=text],input[type=email],textarea{vertical-align:middle;max-width:90%;line-height:30px;height:30px;padding:1px 5px;border:1px solid #d4d4d7;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;font-size:100%;color:#555;background:#fcfcfc}textarea{height:auto;line-height:1.5}input[type=submit],input[type=reset],input[type=button]{padding:3px 10px;border:0;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;line-height:1.5;font-size:100%;color:#fff;background:#d6b58d}input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{color:#d6b58d;background:#fff;cursor:pointer}#wrapper,.inner{margin:0 auto;width:940px}#header,#mainNav{background:#fff}#content{float:right;width:625px;padding:30px 0}#sidebar{float:left;width:265px;padding:30px 0}#footer{border-top:1px solid #333}#header h1,#header .pcure-catch{padding:10px 0 0 3px;color:#3c2f13;font-size:90%;font-weight:400}#header h2,#header .pcure-logo{float:left;color:#3c2f13;font-size:160%;font-weight:700}#headerInfo,.alignright{float:right}#headerInfo p{padding:2px 0 2px 80px;color:#805B2D;font-size:12px;font-weight:700;background:url(images/openTime.png) 0 2px no-repeat}#headerInfo p.tel{background:url(images/tel.png) 0 4px no-repeat;font-size:16px}#headerInfo p.address{background-image:url(images/address.png)}#headerInfo p.line{background-image:url(images/lineresv.png)}#mainImg{line-height:0;text-align:center;background:url(images/main_bg.png) 50% 0 no-repeat;z-index:0}h2.title{margin:10px 0 20px;padding:10px 15px 5px;font-size:120%;font-weight:400;color:#80702d;border-bottom:3px solid #dbbfa0;border-left:2px dotted #dbbfa0}h2.first{margin-top:0}.dateLabel{margin:-10px 0 10px;text-align:right;font:italic 1em "Palatino Linotype","Book Antiqua",Palatino,serif}.post p{padding-bottom:15px}.post ul{margin:0 0 10px 20px}.post ul li{margin-bottom:5px;padding-left:5px}.post ol{margin:0 0 10px 30px}.post ol li{list-style:decimal}.post h1{margin:20px 0;padding:5px 0;font-size:150%;color:#252525;border-bottom:3px solid #3c2f13}.post h2,.post h3{margin:10px 0;border-bottom:2px solid #3c2f13;font-weight:400}.post h2{padding-bottom:2px;font-size:130%;color:#252525}.post h3{font-size:120%;color:#2e2c2c}.post blockquote{padding:10px 0 10px 15px;margin:10px 0 25px 30px;border-left:5px solid #ccc}.post blockquote p{padding:5px 0}.post table{border:1px solid #B5A798;border-collapse:collapse;border-spacing:0;margin:10px 0 20px}.post table th{padding:7px 10px 7px 5px;border:solid #B5A798;border-width:0 0 1px 1px;font-weight:400;color:#805B2D;background:#eff1f0}.post dt,.price{font-weight:700}.post table td{padding:7px 5px;border:1px solid #B5A798;border-width:0 0 1px 1px;color:#777;background:#fff}.post dd{padding-bottom:10px}#content img{max-width:100%;height:auto;margin-bottom:20px}h3.title,.side-title{clear:both;margin:10px 0 0;padding:5px 0;font-size:110%;color:#252525}h3.first{margin-top:0}.heading{padding:7px;margin:15px;font-size:16px;border-left:3px solid #80702d;color:#80702d}.post2,.price{padding-left:30px}ul.post3 li{position:relative}ul.post3 li::after{display:block;content:'';position:absolute;top:.5em;left:-1em;width:8px;height:3px;border-left:2px solid #3498db;border-bottom:2px solid #3498db;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}ul.post4{background:#ffeff8;font-size:110%;font-weight:bold;color: #eb6363;padding-left:30px;}ul.post4 li {position: relative;}ul.post4 li::after{display: block;content: '';position: absolute;top: .5em;left: -1em;width: 8px;height: 3px;border-left: 2px solid #ff0000;border-bottom: 2px solid #ff0000;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}.price{font-size:120%;color:#e2858f;margin:10px 0}img.aligncenter{display:block;margin:5px auto}img.alignleft,img.alignright{padding:4px;margin:0 0 2px 7px;display:inline}img.alignleft{margin:0 7px 2px 0}.alignleft{float:left}.guide{padding-left:30px;font-size:115%;font-weight:400;color:#805B2D;margin:10px 0}.widget{padding-bottom:20px;margin-bottom:20px}.widget h3,.widget .widget-title{margin:0 0 10px;padding:5px 0;font-size:100%;font-weight:400;color:#252525;border-bottom:3px solid #dbbfa0}.widget li{margin:0 10px 10px 5px;border-bottom:1px dotted #ccc}.widget a{display:block;padding-left:15px;background:url(images/arrow.png) 0 50% no-repeat}.widget a:hover{background-position:3px 50%}p.banner{padding-bottom:15px}#contactBanner{width:265px;height:50px;padding-top:110px;background:url(images/banners/banner_tel.jpg) no-repeat}#contactBanner p.tel{display:inline;padding-left:80px;margin-left:30px;text-align:center;font-size:16px;font-weight:700;background:url(images/tel.png) no-repeat}#searchform input[type=text]{line-height:1.7;height:24px;width:140px;vertical-align:bottom}.newsTitle{margin:15px 0 20px;padding:5px 0;font-size:100%;color:#252525;border-bottom:3px solid #dbbfa0}.newsTitle h3,.newsTitle .side-title{float:left;font-weight:400}.newsTitle p{float:right;padding:0 0 0 10px;font-size:.8em;background:url(images/arrow.png) 0 50% no-repeat}.news{padding-bottom:40px}.news p{padding-bottom:2px;border-bottom:1px dotted #ccc}.news p a{display:block;padding:5px 0;color:#252525;font:italic 110% "Palatino Linotype","Book Antiqua",Palatino,serif}.news a span{color:#777;font:400 90% Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif}table.formTable th,ul.thumb h3{font-weight:400;font-size:100%}.news span{padding-left:10px}.news a:hover span{color:#777}#footerLogo{float:left;width:265px}#footerLogo img{max-width:265px;height:auto}#footer ul{float:right;width:625px;font-size:95%;padding-bottom:20px}#footer ul ul{padding-bottom:0;width:auto}#footer ul li{display:inline-block;vertical-align:text-top;text-align:left;padding:5px 0;margin-left:15px;background:url(images/arrow.png) 0 9px no-repeat}#copyright,#pageLinks,ul.thumb h3{text-align:center}#footer ul li a{display:block;padding:0 0 0 12px}#footer ul li a:hover{text-decoration:underline}#footer ul li li{display:block;padding:0;margin-left:5px;background:url(images/arrow2.png) 0 6px no-repeat}#footer ul li li a{padding:0 0 0 8px}#copyright{padding:5px;font-style:normal;font-size:85%;zoom:1}.pagenav{width:100%;height:30px;margin:5px 0 20px}.prev{float:left}.next{float:right}#pageLinks{color:#4f4d4d}.thumbWrap{width:645px;margin-right:-20px}.thumbWrap li{float:left;width:300px;margin:0 20px 0 0;padding:2px 0 0px;background:0 0}.thumbWrap img{max-width:100%;height:auto}ul.thumb h3{margin-top:10px;padding:1px;background:#fff;border:1px solid #bcbcbc}ul.thumb h3 span{display:block;padding:2px 3px;background:#e9d8c5;color:#805B2D}ul.thumb h3:hover{background:#f3f3f3}ul.thumb h3:hover span{background:#fff;color:#000}#formWrap{width:auto;height:auto;margin:0 auto;color:#555;line-height:120%;font-size:100%}table.formTable{width:95%;margin:0 auto;border-collapse:collapse}table.formTable td,table.formTable th{border:1px solid #ccc;padding:10px}table.formTable th{width:18%;vertical-align:middle;background:#f5f5f5;text-align:left}.required{color:red}input[type=text],input[type=Email],input[type=tel],select,textarea{width:90%;background-color:#fff;color:#000;padding:10px 0 10px 10px;margin:10px 0}input[type=text]:focus,input[type=Email]:focus,input[type=tel]:focus,select:focus,textarea:focus{background-color:#fff}@media only screen and (min-width:1025px){#mainNav li,#mainNav li li,#mainNav li li a{height:40px;line-height:40px}#mainNav{clear:both;padding:5px 0;position:relative;z-index:200;background:#e9d8c5}#mainNav ul{background:url(images/sep.png) 50% 50% no-repeat}#mainNav li{float:left;position:relative;padding:0 22px;background:url(images/sep.png) 100% 50% no-repeat}#mainNav li a{display:block;text-align:center;float:left;color:#805B2D;padding:0 15px}#mainNav li a:active,#mainNav li a:hover,#mainNav li.current-menu-item a,#mainNav li.current-menu-parent a{background:#fff;color:#000}#mainNav ul ul{width:160px}#mainNav li ul{display:none}#mainNav li li{float:none;width:235px;padding:0}#mainNav li:hover ul{display:block;position:absolute;top:40px;left:-7px;z-index:500}#mainNav li li a{width:100%;padding:0;font-size:95%;text-align:left}#mainNav li li a span{padding:0 10px}#mainNav li li a:hover,#mainNav li li.current-menu-item a{color:#000}#mainNav li:hover li{margin:0;background:#e9d8c5;border-bottom:1px solid #FFF;color:#000}#mainNav li:hover li:last-child{border:0}nav div.panel{display:block!important;float:left}a#menu{display:none}}@media only screen and (max-width:1024px){#mainNav{clear:both;width:100%;margin:0 auto;padding:20px 0}#mainNav .inner{width:98%}#mainNav a.menu{width:100%;display:block;height:40px;line-height:40px;font-weight:700;text-align:left;color:#fff;border:1px solid #ccc;background:url(images/menuOpen.png) 5px 10px no-repeat #e9d8c5}#mainNav a#menu span{padding-left:2.5em}#mainNav a.menuOpen{border-bottom:0;color:#fff;background:url(images/menuOpen.png) 5px -32px no-repeat #e9d8c5}#mainNav a#menu:hover{cursor:pointer}nav .panel{display:none;width:100%;position:relative;right:0;top:0;z-index:1;border:1px solid #ccc}.panel ul{margin:0;padding:0}.panel ul li{float:none;clear:both;width:100%;height:auto;line-height:1.2}.panel ul li a,.panel ul li.current-menu-item li a{display:block;width:100%;padding:1em 0;text-align:left;background:#fff}.panel ul li a span{padding-left:1em}.panel ul li a:active,.panel ul li a:hover,.panel ul li li.current-menu-item a,.panel ul li.current-menu-item a,.panel ul li.current-menu-item li a:active,.panel ul li.current-menu-item li a:hover{background:#faf4f3}.panel ul li li{float:left;border:0}.panel ul li li a,.panel ul li li.current-menu-item a,.panel ul li.current-menu-item li a{background:url(images/sub1.png) 20px 50% no-repeat #fff}.panel ul li li a:hover,.panel ul li li.current-menu-item a,.panel ul li.current-menu-item li a:hover{background:url(images/sub1.png) 20px 50% no-repeat #faf4f3}.panel ul li li:last-child a{background:url(images/subLast.png) 20px 50% no-repeat #fff}.panel ul li li:last-child a:hover,.panel ul li li:last-child.current-menu-item a,.panel ul li.current-menu-item li:last-child a:hover{background:url(images/subLast.png) 20px 50% no-repeat #faf4f3}.panel ul li li a span{padding-left:35px}nav div.panel{float:none}#mainImg{margin-bottom:20px;background-image:none}}@media only screen and (max-width:959px){#banners,#header,#wrapper,.inner{width:100%}#banners,#contactBanner,.panel ul,.thumbWrap{margin:0 auto}#banners,#footer,.widget_search{text-align:center}#header h1,#header h2,#header .pcure-catch,#header .pcure-logo{padding:10px}#headerInfo{padding-right:10px}.panel ul ul{padding:0}nav div.panel{float:none}#mainImg img{width:98%;height:auto}#content,#sidebar{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0}#banners p{width:40%;float:none;margin:0 1% 0 2%}#banners p img{width:100%;height:auto}#footer{margin:0;border:0}#footer ul,#footerLogo{float:none;width:auto;padding-bottom:20px;text-align:center}#footer ul{padding-top:20px;border-top:1px solid #ccc}#footer ul ul{padding-top:0;border:0}}@media only screen and (max-width:648px){.thumbWrap{width:100%;margin:0 auto;text-align:center}.thumbWrap ul.thumb li{width:70%;float:left;margin:0 1% 0 2%}}@media only screen and (max-width:644px){#banners,#header{text-align:center}#banners p,.alignleft,.alignright{float:none}#header{width:98%;padding:0 1%}#footerLogo,#header h2,#headerInfo,#header .pcure-logo{float:none;padding:0}#headerInfo{width:250px;margin:0 auto}img.alignleft,img.alignright{display:block;margin:5px auto;padding:0}#footer ul{text-align:left;padding:15px}#footer ul ul{padding:0}#banners{width:80%;margin:0 auto}#banners p{width:100%;margin:0 1% 0 2%}#banners p img{width:100%;height:auto}}

.clear { 
 clear:both;
}
.caseVoice .guide {
 padding-left: 0px;
 font-size: 115%;
 font-weight: bold;
}
#pagenate {
 text-align:center;
 font-size:120%;
}
.h3Title {
 border-bottom: 1px solid #633100;
 padding-left: 0px;
 font-size: 115%;
 font-weight: bold;
 color: #80702d;
}
.articleBox {
  margin-top: 20px;
}
.readmore {
  margin: 15px 0 10px 20px;
  text-align: right;
}
.prevnext {
  text-align: center;
}
.prevnext .prev {
  float: none;
}
.prevnext .next {
  float: none;
}
.news ul li {
 padding: 5px 0 7px 10px;
border-bottom: 1px dotted #ccc;
}

strong {
font-weight: bold;
}
#footerFloatingMenu {
    display: flex;
    width: 100%;
    background-color: #E06C9C; /* ピンク（TEL予約ボタンの色味に合わせる） */
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 100;
    text-align: center;
    padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); /* 上に余白（詰まって見えないように） */
    box-sizing: border-box;
}
/* アイコンはSVG＋文字（画像のぼやけ対策。拡大しても滑らか） */
#footerFloatingMenu a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
#footerFloatingMenu a:active { opacity: .7; }
#footerFloatingMenu svg { display: block; width: 28px; height: 28px; fill: #fff; }
#footerFloatingMenu .pcure-ffm-cut { stroke: #E06C9C; }
/* 固定メニューがページ最下部（コピーライト等）に被らないよう、スマホだけ下に余白を確保 */
@media (max-width: 643px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }
}
@media (min-width: 644px) {
    #footerFloatingMenu {
        display: none;
    }
}
.h2title_new {
    background: linear-gradient(-225deg,rgb(83,36,6),rgb(153,61,5));
    padding-left: 0px;
    font-size: 200%;
    color: #ffffff;
    text-align: center;
}
.h3title_new {
    background: linear-gradient(-225deg,rgb(153,61,5),rgb(83,36,6));
    padding-left: 0px;
    font-size: 150%;
    color: #ffffff;
    text-align: center;
}
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* 　ヘッダー・ナビゲーション　202001変更
-------------------------------------------*/

@media screen and (min-width:643px) {
  .sponly {
    display: none;
  }
  .spmode {
    display: none;
  }
}
@media screen and (max-width:643px) {
  #header h1 ,
  #header .pcure-catch {
    font-size: 80%;
  }
  #headerInfo {
    display: none;
  }
  #hgwrap {
    position: relative;
  }
  /* ヘッダー：TEL予約／ロゴ／メニュー を横一列に並べ、上端をそろえる（ボタンはSVG＋文字・影なし） */
  #hgwrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
    align-items: start;
    padding: 0 5px 10px;
  }
  #hgwrap > h1,
  #hgwrap > .pcure-catch {
    grid-column: 1 / -1;
  }
  .telicon { grid-column: 1; grid-row: 2; }
  .spmode.pcure-logo { grid-column: 2; grid-row: 2; margin: 0 auto; padding: 0; line-height: 0; text-align: center; }
  .spmode.pcure-logo a { display: block; color: #803E36; }
  .pcure-sp-title {
    display: block;
    color: #803E36;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 800;
    font-size: clamp(16px, 5.1vw, 22px);
    line-height: 1.3;
    letter-spacing: .03em;
    white-space: nowrap;
    padding-top: 2px;
  }
  @media (max-width: 340px) { .pcure-sp-title { font-size: 15px; letter-spacing: 0; } }
  .menuicon { grid-column: 3; grid-row: 2; cursor: pointer; }
  .pcure-hbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 72px;
    height: 50px;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    line-height: 1.15;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pcure-hbtn:active { opacity: .75; }
  .pcure-hbtn svg { display: block; fill: #fff; flex: none; }
  .pcure-hbtn--tel { background: #E06C9C; gap: 3px; font-size: 12px; text-align: left; }
  .pcure-hbtn--tel svg { width: 22px; height: 22px; }
  .pcure-hbtn--menu { background: #E4B44E; flex-direction: column; gap: 2px; font-size: 10px; }
  .pcure-hbtn--menu svg { width: 26px; height: 26px; }
  .pcmode {
    display: none;
  }
  .spmode img {
    width: min(100%, 190px);
    height: auto;
    margin: 0;
  }
  
  
  /*グローバルナビ*/
  #mainNav {
    display: none;
  }
  .navWrap {
    position: fixed;
    z-index: 200;
  }
  .global-nav {
    position: fixed;
    right: -320px; /* これで隠れる */
    top: 0;
    width: 300px; /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  
  .navlist {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #805B2D;
  }
  .navlist {
    text-align: left;
    padding: 0 0 0 20px;
  }
  .navlist a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    text-decoration: none;
    color: #805B2D;
  }
  .navlist a:hover {
    background-color: #eee;
  }
  .navlist .sub-menu a {
    border-bottom: none;
    border-top: none;
    padding-left: 15px;
  }
  .black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 150;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }
  
  .burger {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px; 
    height: 50px; 
    cursor: pointer;
    z-index: 500;
  }
  .nav-open .hamburger__line {
    position: absolute;
    left: 15px;
    width: 22px;
    height: 2px;
    background-color: #111;
    transition: all .6s;
  }
  /* 表示された時用のCSS */
  .nav-open .global-nav {
    right: 0;
  }
  .nav-open .black-bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger__line--2 {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 20px;
  } 
}