@charset "utf-8";

/*
Theme Name:Bayside Cafe
Description:カフェ・レストラン向けテーマ
Version:3.2.0
Author:Haruto
*/



/* スマホ画面（モバイルファースト） */

/* 共通 */
html {
  scroll-behavior: smooth;
}
body{
  background-color: #fff;
  color:#333;
  /* フォントはfunctions.phpで言語別に動的に設定されます（フォールバック用） */
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Sans', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'Meiryo', 'メイリオ', 'MS Pゴシック', 'MS PGothic', 'Microsoft YaHei', 'SimHei', 'Microsoft JhengHei', 'Noto Sans Thai', 'Sarabun', 'Kanit', 'Malgun Gothic', '맑은 고딕', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
a{
  text-decoration:none;
  color:#333;
  transition:0.5s;
}
a:hover{
  color:#333;
}
.toppage-h2{
  text-align: center;
  margin-bottom:50px;
  font-size:2.5em;
}
.about-sec-title{
  font-size:1.5em !important;
}
.screen-reader-text,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
p{
  letter-spacing:0.05em;
  line-height: 1.8;
  font-size:16px;
}
h3{
  line-height: 1.5em;
}
section{
  padding:50px 10px;
}
.cafe-btn{
  max-width:300px;
  height:60px;
  margin:50px auto 0 auto;
  text-align: center;
}
.cafe-btn a{
  color:#fff;
  display:block;
  line-height: 60px;
  font-size:14px;
  transition: 0.5s;
}
.pc{
  display:none;
}
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

.pc-only{
  display:none;
}
.sp-only{
  display:block;
}



/* ----------------------------ヘッダー---------------------------- */
header{
  background:transparent;
  position:fixed;
  top:0;
  width:100%;
  z-index:2;
  padding:32px 15px 10px;
}
h1{
  text-align: center;
}
h1 img{
  width:250px;
  height:auto;
}
.site-logo{
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-logo img{
  width:160px;
  height:auto;
}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
nav.globalnav-sp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity:0;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility .6s ease;
}
nav.globalnav-sp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
nav.globalnav-sp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalnav-sp ul li:last-child {
  padding-bottom: 0;
}
nav.globalnav-sp ul li:hover{
  background :#555;
}
nav.globalnav-sp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* スマートフォン サブメニュードロップダウン */
nav.globalnav-sp ul li.menu-item-has-children {
  position: relative;
}
nav.globalnav-sp ul li.menu-item-has-children > a {
  position: relative;
  padding-right: 40px;
}
nav.globalnav-sp ul li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: transform 0.3s ease;
}
nav.globalnav-sp ul li.menu-item-has-children.active > a::after {
  transform: translateY(-50%) rotate(180deg);
}
nav.globalnav-sp ul li .sub-menu {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0;
  margin: 0;
}
nav.globalnav-sp ul li.menu-item-has-children.active .sub-menu {
  display: block;
  max-height: 500px;
  padding: 0;
}
nav.globalnav-sp ul li .sub-menu li {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav.globalnav-sp ul li .sub-menu li:first-child {
  border-top: none;
}
nav.globalnav-sp ul li .sub-menu li a {
  padding-left: 2em;
  padding-right: 1em;
  text-align: left;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalnav-sp.active {
  opacity:100;
  pointer-events: auto;
}
.hamburger.transform{
  background-color:rgba(0,0,0,0.5);
}
.logo-hide{
  display:none;
}



/* -------------------------------スライドショー--------------------------- */
.slide{
  position:relative;
  height:100vh;
  overflow: hidden;
  margin-bottom: 40px;
}
.slide img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  animation:slideshow 24s linear infinite;
  filter: brightness(70%);
}
.slide img:nth-child(2){
  animation-delay:8s;
}
.slide img:nth-child(3){
  animation-delay:16s;
}

@keyframes slideshow{
  0%{
    opacity:0;
    transform: scale(1);
  }
  10%{
    opacity:1;
  }
  28%{
    opacity:1;
  }
  38%{
    opacity:0;
    transform: scale(1.1);
  }
  100%{
    opacity:0;
  }
}

/* スライドテキスト */
.slide-txt{
  font-size:22px;
  color:#fff;
  position:absolute;
  top:43%;
  max-width:90%;
  margin:0 auto;
  left:0;
  right:0;
  text-shadow:0 0 2px #fff;
}
.slide-txt{
  opacity:0;
  animation:slidetext 24s linear infinite;
}
.slide-txt2{
  animation-delay:8s !important;
}
.slide-txt3{
  animation-delay:16s;
}

@keyframes slidetext{
  0%{
    opacity:0;
  }
  10%{
    opacity:1;
  }
  28%{
    opacity:1;
  }
  38%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}



/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:calc(10% + 30px);
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:calc(10% + 30px);}
    50%{bottom:calc(13% + 30px);}
   100%{bottom:calc(10% + 30px);}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}
.scrolldown4:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
right:0;
  /*矢印の形状*/
width:1px;
height: 50px;
background:#eee;
}

/* フランチャイズお問合せボタン */
.franchise-inquiry-btn{
  position: absolute;
  bottom: 200px;
  right: 40px;
  z-index: 1;
}

.franchise-inquiry-btn a{
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  line-height: 1;
}

.franchise-inquiry-btn a:hover{
  transform: translateY(-2px);
}



/*--------------------------コンセプト------------------------------ */
.concept img{
  width:98%;
  position:relative;
  left:-10px;
  z-index: 1;
}
.concept h3{
  text-align: left;
  margin-bottom:30px;
  font-size:22px;
  line-height: 1.5em;
}
.concept-txt{
  width:98%;
  padding:60px 30px 40px;
  margin-left:auto;
  position:relative;
  top:-30px;
  left:10px;
}
.concept .cafe-btn{
  margin-top:0;
}



/* ----------------------おすすめメニュー------------------------ */
.recommend-menu-item{
  background:#fff;
  text-align: center;
  margin:0 auto 25px auto;
}
.recommend-menu-item img{
  width:100%;
}
.recommend-menu-name{
  text-align: center;
  padding: 15px 0;
}
.recommend-menu-txt{
  padding:10px;
  font-size:14px;
  text-align: left;
}



/* ------------------------こだわり------------------------------ */
.obsession{
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment:scroll;
  color:#fff;
  padding-top:70px;
  padding-bottom:70px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.obsession::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
  pointer-events: none;
}
.obsession h2,
.obsession .obsession-txt,
.obsession .cafe-btn{
  position: relative;
  z-index: 1;
}
.obsession h2{
  color:#fff;
  text-align: center;
  margin-bottom:50px;
  font-size:2.5em;
}
.obsession-txt{
  text-align:center;
  font-weight:500;
  color:#fff;
  line-height:3 !important;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.obsession .cafe-btn{
  margin-top:100px;
}
.obsession .cafe-btn a{
  background-color: #000000;
}



/* -------------------ギャラリー------------------------ */
.slick_slider {
  width: 100%;
  display: flex;
  max-width: 87%;
  margin: auto;
}
.slick_slider li {
  height: auto;
  margin-right: 10px;
  margin-left: 10px;
}
.slick_slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}
.slick-dots {
  left: 50%;
  transform: translateX(-50%);
}

/* ギャラリー画像と店名 */
.gallery-item {
  position: relative;
}
.gallery-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.gallery-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery-shopname {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
  font-weight: normal;
  line-height: 1.4;
  z-index: 1;
}



/* -------------------------お知らせ--------------------------- */
.article-item{
  margin-bottom:30px;
}
.article-item-img{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 アスペクト比 */
  overflow:hidden;
  margin-bottom:10px;
}
.article-item-img img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.article-item-body{
  padding:0 10px;
}
.article-item-title{
  text-align: center;
  border-bottom:1px solid #ccc;
  padding-bottom:5px;
}

/* トップページのニュースセクションの記事タイトルを左寄せ */
.news .article-item-title {
  text-align: left;
}
.article-item_meta{
  display:flex;
  justify-content: center;
  padding:5px 0;
}
.article-item_meta li{
  list-style: none;
  padding:5px;
}
.article-item-cat{
  background:#ddd;
  border-radius:3px;
}
.article-item-date,.article-item-cat,.article-item-txt{
  font-size:13px;
}



/* ------------------------アクセス---------------------- */
.access-map{
  margin-bottom:30px;
}
.access-wrap iframe{
  width:100%;
  height:300px;
}
.access-info{
  text-align: center;
}
.access img{
  width:70%;
  margin-bottom:10px;
}
.access-shopname{
  font-size:20px;
  margin-bottom:20px;
}
.access-txt{
  text-align: left;
  padding:0 10px;
}
.toppage-shop-txt{
  text-align: center;
  margin-bottom: 20px;
}



/* -------------------------フッター---------------------------- */
footer{
  text-align:center;
  padding:20px;
  color:#fff;
  margin-top:120px;
}
footer img{
  width:200px;
}
/* フッターメニュー */
.footer-menu{
  margin:20px 0;
}
.footer-menu-list{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin:0;
  padding:0;
}
.footer-menu-list li{
  margin:0 15px;
}
.footer-menu-list a{
  color:#fff;
  text-decoration: none;
  line-height: 2;
}
.footer-menu-list a:hover{
  opacity:0.8;
  transition:opacity 0.3s;
}
.footer-sns{
  display:flex;
  justify-content: center;
  margin:20px 0;
}
.footer-sns-item{
  list-style-type: none;
  padding:10px;
}
.footer-sns-item a{
  color:#fff;
  font-size:26px;
}
footer small{
  font-size:12px;
}

/* SNSリスト */
.sns-list{
  display:flex;
  justify-content: center;
  margin:20px 0;
}
.sns-item{
  list-style-type: none;
  padding:10px;
}
.sns-item a{
  font-size:26px;
}



/* ---------------固定ページ------------------- */
.page-title-bg{
  height:360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size:cover;
  background-position: center center;
  text-align: center;
  margin:0;
  position: relative;
}
.page-title-bg::after{
  content: '';
  background-color: rgba(0,0,0,.3);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.page-title{
  color:#fff;
  text-align: center;
  position: relative;
  z-index: 1;
  font-size:3.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-weight: normal;
}
.page-container{
  max-width:900px;
  margin:0 auto;
  padding:50px 10px;
}



/* ----------------投稿ページ-------------------- */
.container{
  padding:30px 10px;
}
.main-contents{
  margin-bottom:50px;
}
.post-title{
  font-size:24px;
  margin-bottom:20px;
  margin-top: 0;
  font-weight: normal;
}

/* 投稿ページ（single）のタイトルを左寄せ */
.single .post-title {
  text-align: left;
  line-height: 1.8;
}
.post-info{
  margin-bottom:20px;
}

/* 投稿ページ（single）の投稿情報を中央寄せ、margin-bottomを40pxに */
.single .post-info {
  text-align: center;
  margin-bottom: 40px;
}

/* 投稿ページ（single）のcontainerの最大幅を720pxに */
.single .container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.post-cat{
  margin-left:10px;
}
.thumb-img{
  max-width:100%;
}
.content-tags{
  list-style:none;
  margin-top:30px;
}
.content-tags li{
  display:inline-block;
  margin-right:10px;
  border-radius:20px;
}
.content-tags li a{
  display:block;
  padding:6px;
  font-size:14px;
}
.widget_block{
  list-style:none;
}
.widget_block li{
  list-style:none;
  margin-bottom:10px;
}
.sidebar h2{
  font-size:20px;
  margin-top:40px;
  margin-bottom:20px;
  padding-bottom:5px;
}
.wp-block-search__label{
  display:block;
  margin-bottom:15px;
  padding-bottom:5px;
}

/* 前へ・次へリンク */
.content-nav{
  margin-top:50px;
  display:flex;
  justify-content: center;
  gap: 60px;
}
.content-nav-prev,.content-nav-next{
  font-size:14px;
}
.content-nav-prev i,.content-nav-next i{
  margin: 0 5px;
}
.content-nav-next{
  text-align: right;
}


/* -----------------------アーカイブページ------------------- */
.article-wrap{
  display:flex;
  margin-bottom:30px;
  padding-bottom:20px;
  border-bottom:1px solid #ccc;
}
.archive-left{
  width:40%;
  margin-right:20px;
}
.archive-image-wrapper{
  position:relative;
  width:100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 アスペクト比を維持 (9/16 = 0.5625 = 56.25%) */
  overflow: hidden; /* 画像がはみ出さないように */
}
.archive-right{
  width:60%;
}
.archive-thumb{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display: block; /* imgタグのデフォルトのinlineを解除 */
}
.archive-post-title{
  font-size:1em; /* スマートフォン表示時は1em */
  margin-bottom:10px;
}

.archive-post-info{
  font-size: 12px;
  margin-bottom:10px;
}
.excerpt{
  font-size:14px;
  margin-bottom:10px;
  display: none; /* スマートフォン表示時は非表示 */
}
.more-btn{
  width:150px;
  text-align: center;
  margin-left:auto;
}
.more-btn a{
  display:block;
  color:#fff;
  transition: 0.6s;
  font-size:14px;
  padding:3px;
}

/* ページネーション */
.pagination{
  text-align: center;
}
.page-numbers{
  background:#ddd;
  padding:5px 10px;
  border-radius:3px;
}
.pagination .current{
  color:#fff;
}



/*-------------------- 404ページ ----------------------*/
.toppage-link-404{
  margin-top:30px;
}
.toppage-link-404 a{
  color:blue;
  text-decoration: underline;
}



/*------------------- ブロックに独自のスタイル -------------------*/
/* テーブル　枠線上下のみ */
.wp-block-table.is-style-border-beside{
  max-width:600px;
  margin:0 auto;
}
.wp-block-table.is-style-border-beside td{
  border:1px solid #aaa;
  border-left:none;
  border-right:none;
  padding:10px 30px;
}

/* テーブル　ストライプ */
.wp-block-table.is-style-stripes{
  max-width:600px;
  margin:0 auto;
}
.wp-block-table.is-style-stripes td{
  padding:10px 30px;
}

/* 見出し　最初の一文字だけ大きく＆テーマカラーに */
.wp-block-heading.is-style-cafe-style{
  font-size:28px;
}
.wp-block-heading.is-style-cafe-style::first-letter{
  font-size:1.2em;
}



/* グローバルナビの「説明」欄 */
.menu-item a::after {
  display:block;
  content: attr(data-desc);
  color:#fff;
  font-size:11px;
  padding-top:6px;
}



/* ブロックエディタで出力した部分（リセットCSSでリセットされてしまうため） */
.block-editor-wrap h2{
  font-size:28px;
  line-height: 1.5;
  font-weight: bold;
  margin-bottom:20px;
}
.block-editor-wrap p{
  font-size:16px;
  line-height:1.8;
  margin-bottom:20px;
}

/* aboutページのPタグのmargin-bottomを0に */
.about-text {
  margin-bottom: 0 !important;
}

.block-editor-wrap li{
  font-size:16px;
  line-height:1.5;
}

/* 投稿ページ（single）のリストにインデントを追加 */
.single .container ul,
.single .main-contents ul,
.single .block-editor-wrap ul {
  padding-left: 2em;
  margin-left: 0;
}

.single .container li,
.single .main-contents li,
.single .block-editor-wrap li {
  padding-left: 0;
}

/* ulブロックのインデント */
.ul-indent {
  padding-left: 2em;
  margin-left: 0;
}

/*ブロックの「全幅」用*/
.alignfull{
  width:100vw;
  margin-right:calc(50% - 50vw);
  margin-left:calc(50% - 50vw);
}




/*お問い合わせフォーム用*/
.wpcf7-form-control-wrap input{
  width:100%;
  padding:10px;
}
.wpcf7-form-control-wrap textarea{
  width:100%;
  padding:10px;
  line-height:1.5;
}
.wpcf7-submit{
  padding:8px 40px;
  border-radius: 0 !important;
}

.wpcf7-submit.has-spinner,
.wpcf7-form-control.wpcf7-submit.has-spinner,
.wpcf7-form-control.wpcf7-submit {
  border-radius: 0 !important;
}

/* Contact Form 7 送信ボタンの中央揃え対策 */
/* ラベルや入力フォームは左寄せのまま */
.wpcf7-form p {
  text-align: left;
}

/* 送信ボタンを含む親要素のみを中央揃え */
.wpcf7-form .submit-row,
.wpcf7-form .wpcf7-submit-container {
  text-align: center;
}

/* 送信ボタンを含むpタグを特定して中央揃え（:has()対応ブラウザ用） */
.wpcf7-form p:has(.wpcf7-submit),
.wpcf7-form p:has(input[type="submit"].wpcf7-submit) {
  text-align: center !important;
}

/* 送信ボタン自体を中央揃え */
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  margin: 0 auto;
}

/* スピナーを非表示にして送信ボタンの中央揃えを確実にする */
/* スピナーを非表示にしても機能的な問題はありません */
/* 送信処理中は、Contact Form 7が送信ボタンを無効化したりメッセージを表示したりするため、視覚的フィードバックは維持されます */
.wpcf7-form .ajax-loader,
.wpcf7-form .wpcf7-spinner {
  display: none !important;
}

/* 代替案：スピナーを表示したい場合は上記を削除して、以下の絶対配置スタイルを使用 */
/*
.wpcf7-form p,
.wpcf7-form .submit-row {
  position: relative;
}
.wpcf7-form .ajax-loader,
.wpcf7-form .wpcf7-spinner {
  position: absolute;
  left: calc(50% + 80px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}
*/



/* 検索フォーム */
.wp-block-search__input{
  padding:0 5px;
  width:75%;
}


/* コンタクトフォーム */
.cf7-modern-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Sans', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'Meiryo', 'メイリオ', 'MS Pゴシック', 'MS PGothic', 'Microsoft YaHei', 'SimHei', 'Microsoft JhengHei', 'Malgun Gothic', '맑은 고딕', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #222;
}

.cf7-modern-form .form-group {
  margin-bottom: 20px;
}

.cf7-modern-form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #333;
}

.cf7-modern-form input[type="text"],
.cf7-modern-form input[type="email"],
.cf7-modern-form input[type="tel"],
.cf7-modern-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fafafa;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.cf7-modern-form input:focus,
.cf7-modern-form textarea:focus {
  border-color: #0073e6;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
  outline: none;
}

.cf7-modern-form textarea {
  min-height: 160px;
  resize: vertical;
}

.cf7-modern-form input[type="submit"] {
  display: inline-block;
  background: #666666;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 14px 40px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(102, 102, 102, 0.25);
}

.cf7-modern-form input[type="submit"]:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.cf7-modern-form .submit-row {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 30px;
  gap: 10px;
}

/* Contact Form 7 スピナーのスタイル */
.cf7-modern-form .ajax-loader,
.wpcf7-form .ajax-loader {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* WPForms フォームのスタイル（contactフォームと同様の幅） */
.wpforms-form {
  max-width: 720px;
  margin: 0 auto;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* WPForms 送信ボタンのスタイル（cafe-btnと同様） */
.wpforms-submit-container {
  max-width: 300px;
  height: 60px;
  margin: 50px auto 0 auto !important;
  text-align: center;
}

#wpforms-submit-510,
.wpforms-form .wpforms-submit,
.wpforms-submit,
button.wpforms-submit {
  background: #666666 !important;
  background-color: #666666 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 60px !important;
  line-height: 60px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: 0.5s !important;
  box-sizing: border-box !important;
}

#wpforms-submit-510:hover,
.wpforms-form .wpforms-submit:hover,
.wpforms-submit:hover,
button.wpforms-submit:hover {
  background: #000000 !important;
  background-color: #000000 !important;
}


/* 商品リスト */
.products-list .wp-block-column {
  margin-bottom:20px;
}

.products-list p {
  font-size:0.9rem;
}

/* Moove GDPR Cookie Notice */
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p {
  font-size: 0.8em !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
}

.moove-gdpr-button-holder {
  flex-direction: row-reverse;
}


/* -----------------------ショップページ------------------- */
.page-content {
  margin-bottom: 40px;
  line-height: 1.6;
  color: #666;
}

.page-content p {
  margin-bottom: 15px;
}

.page-content h2,
.page-content h3,
.page-content h4 {
  color: #333;
  margin-top: 30px;
  margin-bottom: 15px;
}

.country-section {
  margin-bottom: 50px;
  margin-top: 0;
}

.country-title {
  font-size: 2rem;
  color: #444;
  border-bottom: 2px solid #666666;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.shops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.shop-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shop-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.shop-photo {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3のアスペクト比 (3/4 = 0.75 = 75%) */
  margin-bottom: 20px;
  overflow: hidden;
}

.shop-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.shop-title {
  margin: 0 0 15px 0;
  font-size: 1em;
  line-height: 1.2em;
}

.shop-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.shop-title a:hover {
  color: #007cba;
}

.shop-excerpt {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #666;
}

.shop-details {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.shop-address,
.shop-hours {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 0.8em;
}

.shop-address strong,
.shop-hours strong {
  color: #333;
  margin-right: 5px;
}

.map-link {
  color: #007cba;
  text-decoration: none;
  margin-left: 5px;
  transition: color 0.3s ease;
  display: inline-block;
}

.map-link:hover {
  color: #005a87;
  text-decoration: none;
}

.map-link i {
  font-size: 1.1em;
}

.no-shops {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 1.1rem;
}

/* フランチャイズバナー */
.franchise-banner {
  position: relative;
}

.franchise-banner a {
  display: block;
  position: relative;
}

.franchise-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.franchise-banner-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 1;
  line-height: 1.4;
}

/* フランチャイズページの資料ダウンロードボタン */
.franchise-materials-section {
  padding: 50px 10px;
  text-align: center;
}

.franchise-materials-button {
  max-width: 800px;
  margin: 0 auto;
}

.franchise-materials-download-btn {
  display: block;
  width: 100%;
  padding: 15px 30px;
  background-color: #666666;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.franchise-materials-download-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

.franchise-materials-download-btn i {
  margin-right: 8px;
}

/* ========================================
   フランチャイズページ専用スタイル
   ======================================== */
.fc-sec01, .fc-sec02, .fc-sec03, .fc-sec04, .fc-sec05, .fc-sec06, .fc-sec07, .fc-sec08, .fc-sec09, .fc-sec10 {
  margin-bottom: 60px;
}

.franchise-page h2 {
  font-size: 2.5em !important;
}

.franchise-page .page-subcatch {
  font-size: 1.5em !important;
}


.fc-sec01 .wp-block-columns,
.fc-sec02 .wp-block-columns {
  font-weight: bold;
}

.fc-sec02,
.fc-sec04 {
  background-color: #fdede4;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 60px 20px;
}

.fc-sec02 > *,
.fc-sec04 > * {
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.fc-subtitle {
  text-align: center;
  color: #ea5514;
  position: relative;
  font-weight: bold;
  font-size: 1.5em !important;
  margin-bottom: 10px !important;
}

.fc-subtitle::before {
  content: "＼";
}

.fc-subtitle::after {
  content: "／";
}

.fc-sec01 .wp-block-columns, 
.fc-sec02 .wp-block-columns {
    gap:20px;
    margin-bottom: 20px;
}

.fc-sec01 .wp-block-column, 
.fc-sec05 .faq-list .wp-block-column {
  padding:20px;
  border-radius: 8px;
}

.fc-sec01 .wp-block-column p span, 
.fc-sec02 .wp-block-column ul li span {
  color: #ea5514;
}

.fc-sec01 .wp-block-column {
  background-color: #fdede4;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fc-sec01 .wp-block-column p {
  margin-bottom: 0;
  line-height: 1.2;
}


.fc-sec01 .wp-block-column p span {
  font-weight: bold;
  font-size: 3.5em;
  color: #ea5514;
}

.fc-sec01 .wp-block-column .chumoku {
  margin-top: 0.5em;
}

.fc-sec01 .wp-block-column .chumoku span {
  font-size: 1.5em;
}

/* fc-sec01スライダーのスタイル */
.fc-sec01-slider {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}

/* PC閲覧時はスライダーを無効化して3列2行のグリッドレイアウトに */
@media (min-width: 961px) {
  .fc-sec01-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    overflow: visible;
  }
  
  .fc-sec01-slider .slick-list,
  .fc-sec01-slider .slick-track {
    display: contents !important;
  }
  
  .fc-sec01-slider .wp-block-column {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .fc-sec01-slider .slick-arrow,
  .fc-sec01-slider .slick-dots {
    display: none !important;
  }
}

.fc-sec01-slider .slick-list {
  overflow: hidden;
  margin: 0 -10px;
}

.fc-sec01-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.fc-sec01-slider .slick-prev,
.fc-sec01-slider .slick-next {
  position: absolute;
  top: 40%;
  z-index: 2;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.fc-sec01-slider .slick-prev {
  left: 10px;
}

.fc-sec01-slider .slick-next {
  right: 10px;
}

.fc-sec01-slider .slick-prev:before,
.fc-sec01-slider .slick-next:before {
  font-family: 'slick';
  font-size: 30px;
  line-height: 1;
  opacity: 0.75;
  color: #ea5514;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-sec01-slider .slick-prev:before {
  content: '←';
}

.fc-sec01-slider .slick-next:before {
  content: '→';
}

.fc-sec01-slider .slick-prev:hover:before,
.fc-sec01-slider .slick-prev:focus:before,
.fc-sec01-slider .slick-next:hover:before,
.fc-sec01-slider .slick-next:focus:before {
  opacity: 1;
  color: #ea5514;
}

.fc-sec01-slider .slick-prev.slick-disabled:before,
.fc-sec01-slider .slick-next.slick-disabled:before {
  opacity: 0.25;
  color: #ea5514;
}

.fc-sec01-slider .slick-dots {
  position: relative;
  bottom: 0;
  margin-top: 20px;
  display: block;
  text-align: center;
}

.fc-sec01-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.fc-sec01-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.fc-sec01-slider .slick-dots li button:before {
  font-family: 'slick';
  font-size: 12px;
  line-height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  content: '•';
  text-align: center;
  opacity: 0.5;
  color: #ea5514;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-sec01-slider .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #ea5514;
}

/* スライダー内のカラムスタイルを維持 */
.fc-sec01-slider .wp-block-column {
  padding: 20px;
  border-radius: 8px;
  background-color: #fdede4;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

/* fc-sec02スライダーのスタイル */
.fc-sec02-slider {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}

/* PC閲覧時はスライダーを無効化して3列2行のグリッドレイアウトに */
@media (min-width: 961px) {
  .fc-sec02-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    overflow: visible;
  }
  
  .fc-sec02-slider .slick-list,
  .fc-sec02-slider .slick-track {
    display: contents !important;
  }
  
  .fc-sec02-slider .wp-block-column {
    width: 100% !important;
    margin: 0 !important;
    height: 100%; /* グリッド内で同じ高さに揃える */
    display: flex;
    flex-direction: column;
  }
  
  /* グリッド内の各ボックスのコンテンツを均等に配置 */
  .fc-sec02-slider .wp-block-column .merit-list {
    flex: 1; /* 残りのスペースを埋める */
  }
  
  .fc-sec02-slider .slick-arrow,
  .fc-sec02-slider .slick-dots {
    display: none !important;
  }
}

.fc-sec02-slider .slick-list {
  overflow: hidden;
  margin: 0 -10px;
}

.fc-sec02-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.fc-sec02-slider .slick-prev,
.fc-sec02-slider .slick-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.fc-sec02-slider .slick-prev {
  left: 10px;
}

.fc-sec02-slider .slick-next {
  right: 10px;
}

.fc-sec02-slider .slick-prev:before,
.fc-sec02-slider .slick-next:before {
  font-family: 'slick';
  font-size: 30px;
  line-height: 1;
  opacity: 0.75;
  color: #ea5514;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-sec02-slider .slick-prev:before {
  content: '←';
}

.fc-sec02-slider .slick-next:before {
  content: '→';
}

.fc-sec02-slider .slick-prev:hover:before,
.fc-sec02-slider .slick-prev:focus:before,
.fc-sec02-slider .slick-next:hover:before,
.fc-sec02-slider .slick-next:focus:before {
  opacity: 1;
  color: #ea5514;
}

.fc-sec02-slider .slick-prev.slick-disabled:before,
.fc-sec02-slider .slick-next.slick-disabled:before {
  opacity: 0.25;
  color: #ea5514;
}

.fc-sec02-slider .slick-dots {
  position: relative;
  bottom: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  text-align: center;
}

.fc-sec02-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.fc-sec02-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.fc-sec02-slider .slick-dots li button:before {
  font-family: 'slick';
  font-size: 12px;
  line-height: 12px;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  content: '•';
  text-align: center;
  opacity: 0.5;
  color: #ea5514;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-sec02-slider .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #ea5514;
}

/* スライダー内のカラムスタイル（既存のfc-sec02スタイルを組み込む） */
.fc-sec02-slider .wp-block-column {
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  height: 100%; /* スライダー内で同じ高さに揃える */
}

.fc-sec02-slider .wp-block-column h3 {
  background-color: #6a3906;
  color: #FFFFFF;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

.fc-sec02-slider .merit-list {
  border-radius: 0 0 8px 8px;
  padding: 20px;
  background-color: #fff;
  flex: 1; /* 残りのスペースを埋めて高さを揃える */
  display: flex;
  flex-direction: column;
}

.fc-sec02-slider .wp-block-column ul {
  list-style: none;
}

.fc-sec02-slider .wp-block-column li {
  padding-left: 1em;
  position: relative;
  font-size: 0.85em;
  line-height: 2.2em;
}

.fc-sec02-slider .wp-block-column li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.fc-sec02-slider .wp-block-column ul li span {
  color: #ea5514;
}

.fc-sec02 .wp-block-column h3 {
  background-color: #6a3906;
  color: #FFFFFF;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}

.fc-sec02 .merit-list {
  border-radius: 0 0 8px 8px;
  padding: 20px;
  background-color: #fff;
}

.fc-sec02 .wp-block-column ul {
  list-style: none;
}

.fc-sec02 .wp-block-column li {
  padding-left: 1em;
  position: relative;
  font-size: 0.85em;
  line-height: 2.2em;
}

.fc-sec02 .wp-block-column li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.fc-sec04 h3 {
  font-size: 1.2em !important;
}
.fc-sec04 h3 span {
  color: #ea5514 !important;
}


.fc-sec04 .wp-block-columns {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.fc-sec04 .wp-block-columns .wp-block-column:first-child {
  width: 58%;
  flex: 0 0 58%;
  padding-right: 5px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.fc-sec04 .wp-block-columns .wp-block-column:nth-child(2) {
  width: 42%;
  flex: 0 0 42%;
  padding-left: 10px;
  box-sizing: border-box;
}

.fc-sec05 .owner-list .wp-block-media-text {
  display: flex;
  align-items: stretch;
}

.fc-sec05 .owner-list .wp-block-media-text__media {
  width: 35%;
  flex: 0 0 35%;
  align-self: flex-start;
}

.fc-sec05 .owner-list .wp-block-media-text__content {
  width: 65%;
  flex: 0 0 65%;
  padding: 0 4%;
}

.fc-sec05 .owner-list .wp-block-media-text__content h3 {
  font-size: 1em;
  margin-bottom: 0.5em;

}
.fc-sec05 .owner-list .wp-block-media-text__content p {
  font-size: 0.7em !important; 
  line-height: 1.5em;
  margin-bottom: 0;
  font-weight: bold;
}

.fc-sec05 .owner-list {
  gap: 10px;
}

.fc-sec05 .owner-list .wp-block-column:not(:first-child) {
  border-left: 1px solid #ddd;
  padding-left: 20px;
}

.fc-sec05 .faq-container {
  gap:30px;
  margin-bottom: 20px;
  font-weight: bold;
}

.faq-item {
  margin-bottom: 8px;
}

.faq-question {
  background-color: #6a3906;
  color: #FFFFFF;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px 8px 0 0;
}

.question-label {
  font-weight: bold;
  margin-right: 4px;
}

.faq-answer {
  background-color: #fdede4;
  color: #ea5514;
  padding: 12px 20px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  border-radius: 0 0 8px 8px;
}

.answer-text {
  line-height: 1.6;
  font-size: 0.8rem;
  position: relative;
  padding-left: 1.2em;
}

.answer-text::before {
  content: "→";
  position: absolute;
  left: 0;
}

/* btn-seikyuボタンのスタイル */
.btn-seikyu {
  text-align: center;
  margin: 20px 0;
}

.btn-seikyu .wp-block-button__link {
  background-color: #f26522;
  color: #ffffff;
  border-radius: 0;
  padding: 30px 20px;
  max-width: 70%;
  width: 640px;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  outline: 1px solid #ffffff;
  outline-offset: -10px;
}

.btn-seikyu .wp-block-button__link:hover {
  background-color: #d85a1e;
  color: #ffffff;
}

/* トップページのフランチャイズ資料請求ボタンのマージン設定 */
main > .btn-seikyu {
  margin: 60px 0;
}

/* ========================================
   レスポンシブ対応（メディアクエリ）
   スマートフォン向けスタイルを優先的に適用
   ======================================== */

/* PC閲覧時（961px以上） */
@media (min-width: 961px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
  .page-title-bg {
    margin-bottom: 40px;
  }
  
  /* SNSセクションのInstagramフィードをMENUセクションと同じ幅に */
  .instagram-feed-wrap {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0;
  }
  
  /* 投稿ページ（single）のタイトルをPCでは中央寄せ */
  .single .post-title {
    text-align: center;
  }
}

/* タブレット専用（769px〜960px） */
@media (min-width: 769px) and (max-width: 960px) {
  /* フォントサイズの調整 */
  .toppage-h2 {
    font-size: 2.2em;
  }
  
  .obsession h2 {
    font-size: 2.2em;
  }
  
  .obsession-txt {
    font-size: 0.95em;
    line-height: 2.2 !important;
    max-width: 85%;
  }
  
  .franchise-page h2 {
    font-size: 2em !important;
  }
  
  .fc-subtitle {
    font-size: 1.4em !important;
  }
  
  .franchise-page .page-subcatch {
    font-size: 1.4em !important;
  }
  
  .fc-sec04 h3 {
    font-size: 1.1em !important;
  }
  
  /* トップページのフランチャイズ資料請求ボタンのマージン設定（タブレット） */
  main > .btn-seikyu {
    margin: 40px 0;
  }
  
  /* 固定ページタイトル背景の高さを調整 */
  .page-title-bg {
    height: 300px;
    margin-bottom: 30px;
  }
  
  .page-title {
    font-size: 3rem;
  }
  
  /* セクションのパディング調整 */
  section {
    padding: 60px 20px;
  }
  
  .page-container {
    padding: 60px 30px !important;
  }
  
  .container {
    padding: 40px 30px !important;
  }
  
  /* フランチャイズページのスライダーコンテンツの高さ調整 */
  .fc-sec01-slider .wp-block-column {
    height: 25vw;
  }
  
  .fc-sec02-slider .wp-block-column {
    height: 25vw;
  }
  
  /* フランチャイズページのボタンのサイズ調整 */
  .btn-seikyu .wp-block-button__link {
    padding: 25px 15px;
    font-size: 20px;
    max-width: 80%;
    width: 500px;
  }
  
  /* ショップページのグリッドレイアウト */
  .shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .shop-item {
    padding: 25px;
  }
  
  .shop-title {
    font-size: 1.1em;
  }
  
  .country-title {
    font-size: 1.8rem;
  }
  
  /* フランチャイズページのfc-sec04のカラム間隔調整 */
  .fc-sec04 .wp-block-columns .wp-block-column:first-child {
    padding-right: 3px;
  }
  
  .fc-sec04 .wp-block-columns .wp-block-column:nth-child(2) {
    padding-left: 7px;
  }
  
  /* トップページのセクション最適化 */
  .recommend-menu-wrap {
    padding: 0 30px !important;
  }
  
  .news-wrap {
    padding: 0 30px !important;
  }
  
  .gallery .shops-grid {
    padding: 0 30px !important;
  }
  
  .concept-wrap {
    padding: 0 30px !important;
  }
  
  /* SNSセクションのInstagramフィードをMENUセクションと同じ幅に */
  .instagram-feed-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 30px;
  }
  
  /* メニューアイテムの間隔調整 */
  .recommend-menu-item {
    margin-bottom: 30px;
  }
  
  /* ニュースアイテムの間隔調整 */
  .article-item {
    margin-bottom: 30px;
  }
  
  /* ヘッダーのパディング調整 */
  header {
    padding: 35px 20px 15px;
  }
  
  /* フッターのパディング調整 */
  footer {
    padding: 50px 30px;
  }
  
  /* トップページのSHOP LISTを縦積みに */
  .gallery .shops-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  
  .gallery .shop-item {
    width: 100%;
    max-width: 100%;
  }
  
  /* トップページのニュース一覧を縦積みに */
  .news-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .news-wrap .article-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 30px;
  }
}

/* タブレット・スマートフォン共通（960px以下） */
@media (max-width: 960px) {
  /* 本文ページの両側に余白を追加 */
  .page-container{
    padding: 50px 20px !important;
  }
  
  .container{
    padding: 30px 20px !important;
  }

  /* コンセプトセクションの幅を調整 */
  .concept-wrap{
    width: 100% !important;
  }

  /* お知らせセクションの両側に余白を追加 */
  .news-wrap{
    padding: 0 20px !important;
  }

  /* おすすめメニューセクションの両側に余白を追加 */
  .recommend-menu-wrap{
    padding: 0 20px !important;
  }

  /* ショップリストセクションの両側に余白を追加 */
  .gallery .shops-grid{
    padding: 0 20px !important;
  }
  
  /* SNSセクションのInstagramフィードをMENUセクションと同じ幅に */
  .instagram-feed-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* フランチャイズページのfc-sec01スライダーコンテンツの高さを80vwに設定 */
  .fc-sec01-slider .wp-block-column {
    height: 30vw;
  }

  /* フランチャイズページのfc-sec02スライダーのmerit-listにpadding-leftを追加 */
  .fc-sec02-slider .merit-list {
    padding-left: 60px;
  }

  /* ショップページのグリッドレイアウト */
  .shops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* スマートフォン（768px以下） */
@media (max-width: 768px) {
  /* フランチャイズお問合せボタン */
  .franchise-inquiry-btn{
    bottom: 220px;
    right: 15px;
  }
  
  .franchise-inquiry-btn a{
    padding: 10px 20px;
    font-size: 12px;
  }

  /* こだわりエリアの背景が途切れないようにする */
  .obsession{
    min-height: 400px;
    background-size: cover;
    background-attachment: scroll;
  }

  /* フランチャイズセクションのテキスト行間を狭める */
  .obsession-txt{
    line-height: 1.8 !important;
    font-size: 0.9em !important;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* フランチャイズページのh2タグの文字サイズを小さくする */
  .franchise-page h2 {
    font-size: 1.5em !important;
  }

  /* フランチャイズページのサブタイトルの文字サイズを小さくする */
  .fc-subtitle {
    font-size: 1.2em !important;
  }

  /* フランチャイズページのfc-sec04 h3の文字サイズを小さくする */
  .fc-sec04 h3 {
    font-size: 1em !important;
  }

  /* フランチャイズページのpage-subcatchの文字サイズを小さくする */
  .franchise-page .page-subcatch {
    font-size: 1.2em !important;
  }

  /* フランチャイズページのowner-listのボーダーラインとpaddingを削除 */
  .fc-sec05 .owner-list .wp-block-column:not(:first-child) {
    border-left: none;
    padding-left: 0;
  }

  /* フランチャイズページのスライダーコンテンツの高さを80vwに設定 */
  .fc-sec01-slider .wp-block-column {
    height: 60vw;
  }

  /* フランチャイズページのfc-sec01スライダーの矢印を左右にずらして文字に重ならないように */
  .fc-sec01-slider .slick-prev {
    left: -6px;
  }

  .fc-sec01-slider .slick-next {
    right: -6px;
  }

  /* フランチャイズページのfc-sec02スライダーコンテンツの高さを自動に設定（見切れ防止） */
  /* 高さを揃えるため、height: autoは削除し、min-heightのみ設定 */
  .fc-sec02-slider .wp-block-column {
    min-height: 50vw;
    height: 100%; /* スライダー内で同じ高さに揃える */
  }

  /* フランチャイズページのfc-sec02スライダーのoverflowをvisibleに変更（見切れ防止） */
  .fc-sec02-slider {
    overflow: visible;
    margin-bottom: 40px;
    padding-bottom: 20px;
  }

  /* フランチャイズページのfc-sec02スライダーのslick-listのoverflowはhiddenのまま（スライダー動作のため） */
  /* 見切れ防止は.slick-trackや.wp-block-columnの高さ調整で対応 */

  /* フランチャイズページのfc-sec02スライダーのmerit-listにpadding-leftを追加 */
  .fc-sec02-slider .merit-list {
    padding-left: 60px;
  }

  /* フランチャイズページのfc-sec02スライダーの矢印を左右にずらして文字に重ならないように */
  .fc-sec02-slider .slick-prev {
    left: -6px;
  }

  .fc-sec02-slider .slick-next {
    right: -6px;
  }

  /* フランチャイズページのfc-sec04のカラムをスマートフォンで縦並びに */
  .fc-sec04 .wp-block-columns {
    flex-direction: column;
    gap: 0;
  }

  .fc-sec04 .wp-block-columns .wp-block-column:first-child,
  .fc-sec04 .wp-block-columns .wp-block-column:nth-child(2) {
    width: 100%;
    flex: 0 0 100%;
    padding-right: 0;
    padding-left: 0;
  }

  /* フランチャイズページのボタンの幅をスマートフォンで調整 */
  .btn-seikyu .wp-block-button__link:not(.franchise-materials-download-btn) {
    width: 100%;
    max-width: 100%;
    padding: 20px 40px;
    font-size: 14px;
  }

  /* フランチャイズバナーテキストのスタイル調整 */
  .franchise-banner-text {
    font-size: 1.2em;
  }

  /* フランチャイズページの資料ダウンロードボタンの文字サイズを小さくする */
  .franchise-materials-download-btn {
    font-size: 14px !important;
  }
  
  /* トップページのフランチャイズ資料請求ボタンのマージン設定（スマートフォン） */
  main > .btn-seikyu {
    margin: 40px 0;
  }
  
  /* トップページのフランチャイズ資料請求ボタンのmax-width設定（スマートフォン） */
  main > .btn-seikyu .wp-block-button__link:not(.franchise-materials-download-btn) {
    max-width: 90% !important;
  }



  /* メディアテキストブロックの画像にマージンを追加 */
  .wp-block-media-text > .wp-block-media-text__media {
    margin-bottom: 20px;
  }

  /* ヘッダーロゴを左寄せに */
  header h1,
  header .site-logo {
    text-align: left;
  }

  /* ヘッダーロゴのpaddingを0に */
  .site-logo {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 固定ページタイトル背景の高さを調整 */
  .page-title-bg {
    height: 240px;
  }

  /* 固定ページタイトルのフォントサイズを調整 */
  .page-title {
    font-size: 2rem;
  }

  /* ギャラリー店名のpaddingを調整 */
  .gallery-shopname {
    padding: 5px;
  }

  /* ショップページのスタイル */
  .country-title {
    font-size: 1.6rem;
  }
  
  .shops-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .shop-item {
    padding: 20px;
  }
  
  .shop-title {
    font-size: 1em;
  }
  
  /* 投稿ページ（single）のタイトルをスマートフォンでは左寄せ */
  .single .post-title {
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5;
  }
}

/* 小さいスマートフォン（600px以下） */
@media (max-width: 600px) {
  /* コンタクトフォームのパディングを調整 */
  .cf7-modern-form {
    padding: 28px 16px;
  }
}

/* Instagram Feed プラグイン用スタイル */
.sb_instagram_header {
  display: none;
}