@charset "UTF-8";
/* CSS Document */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  margin: 0 auto;
  /* サイトの外側の背景を少しグレーにして、枠を目立たせます */
  background-color: #5ab4e5;
  /* 文字の基本の書体と色 */
  color: #000;
  /* 上下に少し余白を作ります */
  font-size: 62.5%;
  padding:
    env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
  overflow-x: hidden;
}
p {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
a {
  text-decoration: none;
  color: #707070;
}
a:hover {
  color: #826530;
}
html {
  scroll-behavior: smooth;
}
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
  font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}
/*最小値:1.2rem → 可変（1rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.7rem*/
.font-size-M {
  font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}
/*最小値:1.6rem → 可変（2.2rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:2.9rem*/
.font-size-L {
  font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}
/* 全体を囲む水色の枠線の設定 */
.wrap {
  /* 枠線の太さ、種類（直線）、色（デザインに近い水色） */
  border: 12px solid #5ab4e5;
  /* 枠の中の背景色は白 */
  background-color: #ffffff;
  /* サイトの最大幅を設定し、画面の中央に配置します */
  max-width: 100%;
  margin: 0 auto;
  /* 枠と中身（テキストなど）の間の隙間 */
  padding: 100px;
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
}
.logo_fadein {
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999;
}
.logo_fadein p {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  width: 280px;
}
.flame {
  padding: 90px;
  border: 6px solid #E40011;
}
.top {
  display: flex;
}
.top_logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
}
.top-sns {
  position: absolute;
  top: 22px;
  right: 20px;
}
/* SNSアイコン（フォント）の設定 */
.top-sns a {
  color: #5ab4e5; /* アイコンの色を、サイトのテーマカラーである水色にします */
  font-size: 24px; /* アイコンの大きさを指定します */
  text-decoration: none; /* リンクの下線が出ないようにします */
  transition: opacity 0.3s;
}
/* SNSアイコンにマウスを乗せた時の変化 */
.top-sns a:hover {
  opacity: 0.6; /* 少し薄くしてクリックできることを伝えます */
}
.top-cont {
  max-width: 900px;
  align-items: center;
  justify-content: center;
  margin: 60px auto 30px;
  padding: 0;
  text-align: center;
}
.top-cont img {
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}
.top-cont h1 {
  font-weight: 800;
  margin: 20px auto 50px;
  text-align: center;
}
.cont {
  max-width: 900px;
  margin: 0 auto;
}
/* ヘッダー全体の設定 */
.header {
  text-align: center; /* 中身を中央揃えにします */
  margin-bottom: 50px; /* 次のABOUTセクションとの間に余白を作ります */
  height: auto;
}
/* 一番上のロゴの余白設定 */
.top-logo {
  margin-bottom: 30px; /* メニュー画像たちとの間に余白を作ります */
  text-align: left;
}
/* メニュー全体の設定（上の段と下の段を縦に並べる） */
.main-nav {
  display: flex;
  flex-direction: column; /* 中の箱を縦に並べます */
  align-items: center; /* 中央揃えにします */
  gap: 0px; /* 上の段と下の段の間の隙間です */
}
.nav-row-bottom img {
  vertical-align: bottom;
}
/* 上の段の画像同士の隙間 */
.nav-row-top {
  display: flex; /* 画像を横並びにします */
  justify-content: center; /* 中央揃えにします */
  align-items: center; /* 画像の縦の真ん中を揃えます */
  flex-wrap: nowrap; /* スマホなどで画面が狭い場合は折り返します */
  flex-direction: row;
  gap: 10px;
}
.nav-row-mid {
  display: flex; /* 画像を横並びにします */
  justify-content: center; /* 中央揃えにします */
  align-items: center; /* 画像の縦の真ん中を揃えます */
  flex-wrap: nowrap; /* スマホなどで画面が狭い場合は折り返します */
  flex-direction: row;
  gap: 10px;
  margin: -7px 0 0;
}
/* 下の段の画像同士の隙間 */
.nav-row-bottom {
  gap: 5px;
  display: flex; /* 画像を横並びにします */
  justify-content: center; /* 中央揃えにします */
  align-items: center; /* 画像の縦の真ん中を揃えます */
  flex-wrap: nowrap; /* スマホなどで画面が狭い場合は折り返します */
  flex-direction: row;
  gap: 10px;
  margin: 0;
}
.nav-row-top img:hover {
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.nav-row-mid img:hover {
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
.nav-row-bottom img:hover {
  filter: grayscale(100%);
  transition-duration: 0.5s;
}
/* メニューのリンク設定 */
.main-nav a {
  display: inline-block;
}
.section_area {
  padding: 0 10px;
}
.about-section {
  margin: 0 auto;
  padding: 80px 0 110px;
}
.about-text {
  padding: 0 0 40px;
}
/*.about-section p{
    font-size: 2vw;
}*/
/* タイトルエリアの設定 */
.section-title {
  text-align: center;
  margin-bottom: 30px;
}
/* 英語の大きなタイトル（ABOUT） */
.section-title h2 {
  font-family: "balloon-urw", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 90px;
  letter-spacing: -10px;
  color: #E50012;
  margin-bottom: -20px !important;
}
/* 日本語の小さなタイトル（お店のこと） */
.section-title span {
  color: #000; /* 少し薄い色にする */
  display: block; /* 改行させるための設定 */
}
/* （以下略：説明文や店舗情報の設定はそのまま） */
/* 地図と店舗情報を横並びにする大枠 */
.store-info-container {
  display: flex; /* 中身を横並びにするための魔法のコードです */
  justify-content: space-between; /* 左右のバランスをとります */
  align-items: end; /* 縦方向の中央で揃えます */
  gap: 30px; /* 地図とテキストの間に40pxの隙間を作ります */
}
/* 左側の地図のエリア（全体の半分の幅を持たせます） */
.store-map {
  width: 70%;
}
/* Googleマップ自体の大きさを枠にぴったり合わせる設定 */
.store-map iframe {
  width: 100%;
  height: 500px;
  vertical-align: bottom; /* 画像や地図の下にできる不要な隙間を消します */
}
/* 右側のテキストのエリア（全体の半分の幅を持たせます） */
.store-details {
  width: 30%;
}
.store-details h2 {
  font-size: clamp(2rem, calc(1.9rem + 0.625vw), 2.5rem);
}
.store-details h3 {
  /* font-size: 2vw;*/
}
/* --- STAFFセクション --- */
.staff-section {
  margin-bottom: 110px;
}
/* 4つのカードを横並びにする設定 */
.staff-card-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/* 1つ1つのスタッフカードの設定 */
.staff-card {
  flex: 1; /* 4人を均等な幅にします */
  text-align: center; /* 写真や名前を中央揃えにします */
  background-color: #ffffff;
  padding: 10px;
  border: 2px solid #5ab4e5;
  border-radius: 8px;
}
/* スタッフの顔写真（丸くする魔法！） */
.staff-photo {
  object-fit: cover; /* 画像が歪まないように切り抜きます */
  margin-bottom: 15px; /* 下の名前との隙間 */
}
.staff-info{
    font-size: 15px;
    color: #333;
	margin:0 0 2px;
}
/* スタッフの名前 */
.staff-name {
  font-size: 22px;
  color: #333;
  margin-bottom: 15px;
}
/* SNSアイコンを横に並べる設定 */
.staff-sns {
  display: flex;
  justify-content: center; /* 中央に寄せます */
  gap: 12px; /* アイコン同士の隙間 */
  margin-bottom: 15px;
}
/* SNSアイコンの大きさ制限 */
.staff-sns img {
  width: 24px;
  height: 24px;
  transition: opacity 0.3s;
}
/* SNSアイコンにマウスを乗せた時の変化 */
.staff-sns a:hover img {
  opacity: 0.6;
}
/* 自己紹介文 */
.staff-intro {
  font-size: 13px;
  line-height: 1.6;
  text-align: left; /* 文章は読みやすいように左揃えに戻します */
  color: #555;
}
/* SNSアイコン（フォント）の設定 */
.staff-sns a {
  color: #5ab4e5; /* アイコンの色を、サイトのテーマカラーである水色にします */
  font-size: 24px; /* アイコンの大きさを指定します */
  text-decoration: none; /* リンクの下線が出ないようにします */
  transition: opacity 0.3s;
}
/* SNSアイコンにマウスを乗せた時の変化 */
.staff-sns a:hover {
  opacity: 0.6; /* 少し薄くしてクリックできることを伝えます */
}

/* --- BLOGセクション --- */
.news_section {
  margin: 0 auto;
  padding: 30px 0 110px;
}
/* 4つのカードを横並びにする設定 */
.blog-card-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
/* 1つ1つのカードの設定（復活＆リンク用に調整） */
.blog-card {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none; /* リンクの下線を消します */
  color: #333; /* 文字の色 */
  display: block; /* 箱全体をクリックできるようにします */
  transition: opacity 0.3s; /* マウスを乗せた時のフワッとした変化 */
}
/* マウスを乗せた時に少し薄く光るようにする設定 */
.blog-card:hover {
  opacity: 0.7;
}
/* カードの中の画像 */
.blog-card img {
  width: 100%;
  height: 150px; /* 画像の高さを一律に揃えます */
  object-fit: cover; /* 画像が歪まないように綺麗に切り抜きます */
  vertical-align: bottom;
}
/* カードの中のテキストエリア */
.blog-text {
  padding: 15px;
}
/* 日付の文字設定 */
.blog-date {
  /* font-size: 12px;*/
  color: #888;
  margin-bottom: 5px;
}
/* 記事タイトルの文字設定 */
.blog-headline {
  /* font-size: 14px;*/
  font-weight: bold;
  line-height: 1.4;
}

.copyright {
  text-align: center;
  font-size: 10px;
  padding: 0px 0 0;
  margin: 0 auto;
}
/* --- MENUセクション --- */
.menu-section {
  margin-bottom: 110px;
}
.menu-txt {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 30px;
}
/* 3つのカードを横並びにする設定 */
.menu-card-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
/* 1つ1つのプランカードの設定 */
.menu-card {
  flex: 1; /* 3つを均等な幅にします */
  background-color: #ffffff;
  border: 2px solid #5ab4e5; /* テーマカラーの水色で少し太めの枠をつけます */
  border-radius: 8px;
  padding: 30px 20px; /* 内側の余白を少し広めにとります */
  text-align: center; /* タイトルと金額を中央揃えにします */
}
/* プランの名前（週一店長など） */
.menu-plan-title {
  font-size: 18px;
  color: #5ab4e5; /* テーマカラーで目立たせます */
  margin-bottom: 15px;
}
/* 金額の設定 */
.menu-price {
  font-size: 22px; /* 金額を大きく */
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ccc; /* 金額と説明文の間に点線を引きます */
}
/* 「/ 週」などの補足文字を少し小さくする設定 */
.price-note {
  font-size: 14px;
  font-weight: normal;
  color: #666;
}
/* プランの説明文 */
.menu-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  text-align: left; /* 長い文章は読みやすいように左揃えにします */
}

/* --- CONTACTセクション --- */
.contact-section {
  margin-bottom: 110px;
}
/* フォーム全体を中央に配置し、幅が広がりすぎないように制限します */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}
/* 各入力項目のグループ（ラベルと入力欄のセット）の余白 */
.form-group {
  margin-bottom: 25px;
}
/* 「お名前」などのラベル文字の設定 */
.form-group label {
  display: block;
  margin-bottom: 8px;
  /*font-size: 14px;*/
  font-weight: bold;
  color: #333;
}
/* 1行の入力欄と、複数行のテキストエリアの共通設定 */
.form-group input, .form-group textarea {
  width: 100%; /* 幅を100%にして枠いっぱいに広げます */
  padding: 12px; /* 入力欄の内側に余白を作ります */
  border: 1px solid #ccc; /* 薄いグレーの枠線をつけます */
  border-radius: 4px; /* 角を少しだけ丸くします */
  /*font-size: 16px;*/
  font-family: inherit;
  background-color: #fafafa;
}
/* 送信ボタンの設定 */
.submit-btn {
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 40px auto 0; /* 上に余白を取り、左右中央に配置します */
  padding: 15px;
  background-color: #333; /* ボタンの背景色（黒） */
  color: #fff; /* ボタンの文字色（白） */
  border: none;
  border-radius: 30px; /* 角を大きく丸くしてポップな印象にします */
  /*font-size: 16px;*/
  font-weight: bold;
  cursor: pointer; /* マウスを乗せると指のマークになるようにします */
  transition: opacity 0.3s;
}
/* 送信ボタンにマウスを乗せた時の変化 */
.submit-btn:hover {
  opacity: 0.7; /* 少し透けて光るようにします */
}
/* --- フッター --- */
.footer {
  text-align: center; /* 中央揃え */
  padding-top: 20px;
  margin-top: 40px;
  border-top: 1px dashed #ccc; /* 上に点線の区切り線を引きます */
  /*font-size: 12px;*/
  color: #888;
}
@media screen and (max-width: 780px) {
  /*==========================================
 smp
===========================================*/
  .sp_only {
    display: block;
  }
  .pc_only {
    display: none;
  }
  .wrap {
    padding: 20px;
  }

  .sp-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: fixed; /* 右上に配置 */
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    z-index: 1000;
    cursor: pointer;
  }
  /* ボタンの中の3本線（テーマカラーの水色） */
  .sp-menu-btn span {
    width: 30px;
    height: 3px;
    background-color: #5ab4e5;
    border-radius: 2px;
    transition: 0.3s;
  }
  /* バツ印になるアニメーション */
  .sp-menu-btn.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .sp-menu-btn.is-active span:nth-child(2) {
    opacity: 0;
  }
  .sp-menu-btn.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  /* シンプルな全画面メニュー（少し透ける白背景） */
  .sp-menu {
    display: flex;
    flex-direction: column; /* メニューとSNSを縦に並べる */
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
  }
  .sp-menu.is-active {
    opacity: 1;
    visibility: visible;
  }
  /* メニューのリスト設定 */
  .sp-menu ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin-bottom: 40px; /* 下のSNSアイコンとの隙間 */
  }
  .sp-menu li {
    margin-bottom: 25px;
  }
  /* 文字だけのクリーンなリンク */
  .sp-menu a {
    display: block;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;
  }
  /* メニュー下部のSNSアイコンを横に並べる */
  .sp-menu-sns {
    display: flex;
    gap: 25px;
  }
  /* SNSアイコンの色と大きさ */
  .sp-menu-sns a {
    color: #5ab4e5;
    font-size: 28px;
  }

  .menu-card-container {
    flex-direction: column;
  }

  .blog-card-container {
    flex-direction: column;
  }

  .blog-card-container {
    flex-direction: column;
  }

  .blog-card-container {
    flex-direction: column;
  }

  .store-info-container {
    flex-direction: column; /* スマホでは縦並びに切り替えます */
    gap: 20px;
  }
  /* スマホでは地図もテキストも横幅いっぱいに広げます */
  .store-map, .store-details {
    width: 100%;
  }

  .staff-card-container {
    flex-direction: column;
  }
    
}