/* =====================
   SAKImoto bakery and more
   フランチャイズ募集ページ CSS
===================== */
/*===============
ttl
================*/
.c-ttl-head.fclist {
  background: url(../images/fc/black_back_fc_ttl.jpg) no-repeat center;
  background-size: cover;
  padding: 50px 0;
}
@media screen and (min-width: 768px) {
  .c-ttl-head.fclist {
    padding: 110px 0 100px;
  }
}
.c-ttl-head.fclist .c-ttl-h1 .main {
  color: #ffffff;
}
.c-ttl-head.fclist .c-basic-txt, .c-ttl-head.fclist .p-basic-list__item, .c-ttl-head.fclist .p-ol-list__item, .c-ttl-head.fclist .p-ol-list--sub__item {
  color: #ffffff;
}

/* =====================
   ファーストビュー
===================== */
.sakimoto-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  padding: 60px 40px;
  background-color: #000; 
}

.sakimoto-hero__container {
    position: relative;
    width: 100%;
}

/* テキストアニメーション部分 */
.sakimoto-hero__text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    max-width: 800px;
    text-align: center;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.2); /* 黒背景、20%の不透明度 = 80%透明 */
    padding: 40px 20px; /* 背景が見えるように余白を追加 */
    border-radius: 30px; /* 角を丸く（任意） */
}

.sakimoto-hero__text-scroll {
    /* ラッパー自体はアニメーションなし */
}

.sakimoto-hero__subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
    animation: slideInUp 1.2s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.sakimoto-hero__subtitle:nth-child(1) { animation-delay: 0.4s; }
.sakimoto-hero__subtitle:nth-child(2) { animation-delay: 1.0s; }
.sakimoto-hero__subtitle:nth-child(3) { animation-delay: 1.6s; }
.sakimoto-hero__subtitle:nth-child(4) { animation-delay: 2.2s; }
.sakimoto-hero__subtitle:nth-child(5) { animation-delay: 2.8s; }

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 画像ラッパー */
.sakimoto-hero__images-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 画像グリッド */
.sakimoto-hero__images {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 250px);
    gap: 10px;
}

@media (min-width: 1024px) {
    .sakimoto-hero__images {
        grid-template-rows: repeat(3, 300px);
    }
}

.sakimoto-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.sakimoto-hero__img--1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.sakimoto-hero__img--2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.sakimoto-hero__img--3 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

.sakimoto-hero__img--4 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

/* ==================== タブレット対応 ==================== */
@media (max-width: 1024px) {
    .sakimoto-hero {
        padding: 40px 20px;
    }

    .sakimoto-hero__text-wrapper {
        max-width: 600px;
    }

    .sakimoto-hero__subtitle {
        font-size: 16px;
    }
}

/* ==================== スマートフォン対応 ==================== */
@media (max-width: 768px) {
    .sakimoto-hero {
        min-height: auto;
        padding: 40px 20px;
    }

    .sakimoto-hero__text-wrapper {
        max-width: 90%;
    }

    .sakimoto-hero__subtitle {
        font-size: 14px;
        line-height: 2;
    }

    .sakimoto-hero__images {
        gap: 8px;
        grid-template-rows: repeat(3, 200px);
    }
}

@media (max-width: 480px) {
    .sakimoto-hero {
        padding: 20px 15px;
        min-height: auto;
    }

    .sakimoto-hero__subtitle {
        font-size: 13px;
        line-height: 1.8;
    }

    .sakimoto-hero__images {
        gap: 6px;
        grid-template-rows: repeat(3, 150px);
    }
}

/* =====================
   コンセプトセクション
===================== */
.sakimoto-concept {
  padding: 100px 0;
  background: #fff;
}

.sakimoto-concept__content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.sakimoto-concept__logo {
  margin-bottom: 40px;
}

.sakimoto-concept__logo-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sakimoto-concept__logo-text {
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-top: 10px;
  color: #666;
}

.sakimoto-concept__title {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 40px;
  color: #333;
}

.sakimoto-concept__text {
  font-size: 24px;
  margin-bottom: 60px;
  color: #333;
}

.sakimoto-concept__text strong {
  font-size: 36px;
  font-weight: 400;
  color: #d4a574;
}

.sakimoto-concept__description {
  margin-bottom: 60px;
}

.sakimoto-concept__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

/* =====================
   物販スペースセクション
===================== */
.sakimoto-space {
  padding: 100px 0;
  background: #fafafa;
}

.sakimoto-space__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sakimoto-space__images {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sakimoto-space__img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sakimoto-space__img--main {
  height: 400px;
}

.sakimoto-space__img--sub {
  height: 300px;
}

.sakimoto-space__label {
  display: inline-block;
  padding: 10px 30px;
  background: #d4a574;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
}

.sakimoto-space__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #333;
}

.sakimoto-space__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

/* =====================
   イートインセクション（右揃え）
===================== */
.sakimoto-eatin {
  padding: 100px 0;
  background: #fff;
}

.sakimoto-eatin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* PC表示で画像を左、テキストを右に */
@media (min-width: 769px) {
  .sakimoto-eatin__grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .sakimoto-eatin__content {
    order: 2;
  }
  
  .sakimoto-eatin__image {
    order: 1;
  }
}

.sakimoto-eatin__label {
  display: inline-block;
  padding: 10px 30px;
  background: #d4a574;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
}

.sakimoto-eatin__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #333;
}

.sakimoto-eatin__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

.sakimoto-eatin__image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

/* 商品ギャラリー（JavaScriptのrequestAnimationFrameで完全制御） */
.sakimoto-gallery {
  padding: 60px 0;
  background: #f5f5f5;
  overflow: hidden;
}

.sakimoto-gallery__scroll {
  display: flex;
  gap: 20px;
  will-change: transform; /* パフォーマンス最適化 */
}

.sakimoto-gallery__scroll img {
  width: auto;
  height: 200px;
  object-fit: contain;
  flex-shrink: 0;
}

/* =====================
   テイクアウトセクション
===================== */
.sakimoto-takeout {
  padding: 100px 0;
  background: #fff;
}

.sakimoto-takeout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 60px;
}

.sakimoto-takeout__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sakimoto-takeout__label {
  display: inline-block;
  padding: 10px 30px;
  background: #d4a574;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 30px;
}

.sakimoto-takeout__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #333;
}

.sakimoto-takeout__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

.sakimoto-takeout__cta {
  text-align: center;
}

/* =====================
   フォーム必須マーク
===================== */
.c-form-required {
  color: #c60d0d;
}

/* =====================
   ボタンスタイル
===================== */
.sakimoto-btn {
  display: inline-block;
  padding: 20px 60px;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sakimoto-btn:hover {
  background: #d4a574;
  border-color: #d4a574;
  color: #fff;
}

.sakimoto-concept__cta {
  text-align: center;
  margin-top: 20px;
}

/* =====================
   レスポンシブ
===================== */
@media (max-width: 768px) {
  .sakimoto-concept {
    padding: 60px 0;
  }
  
  .sakimoto-concept__logo-img {
    max-width: 250px;
  }
  
  .sakimoto-concept__title {
    font-size: 24px;
  }
  
  .sakimoto-concept__text {
    font-size: 20px;
  }
  
  .sakimoto-concept__text strong {
    font-size: 28px;
  }
  
  .sakimoto-space,
  .sakimoto-eatin,
  .sakimoto-takeout {
    padding: 60px 0;
  }
  
  .sakimoto-space__grid,
  .sakimoto-eatin__grid,
  .sakimoto-takeout__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* スマホでは順序をリセット */
  .sakimoto-eatin__content {
    order: 0;
  }
  
  .sakimoto-eatin__image {
    order: 0;
  }
  
  .sakimoto-space__img--main {
    height: 300px;
  }
  
  .sakimoto-space__img--sub {
    height: 250px;
  }
  
  .sakimoto-space__title,
  .sakimoto-eatin__title,
  .sakimoto-takeout__title {
    font-size: 20px;
  }
  
  .sakimoto-eatin__image img {
    height: 400px;
  }
  
  .sakimoto-btn {
    padding: 15px 40px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .sakimoto-concept__logo-img {
    max-width: 200px;
  }
  
  .sakimoto-concept__title {
    font-size: 20px;
  }
  
  .sakimoto-concept__text {
    font-size: 18px;
  }
  
  .sakimoto-concept__text strong {
    font-size: 24px;
  }
  
  .sakimoto-concept__description p {
    font-size: 14px;
  }
  
  .sakimoto-space__title,
  .sakimoto-eatin__title,
  .sakimoto-takeout__title {
    font-size: 18px;
  }
  
  .sakimoto-space__description p,
  .sakimoto-eatin__description p,
  .sakimoto-takeout__description p {
    font-size: 14px;
  }
}

/* =====================
   【画像ギャラリー レスポンシブ対応修正】
   元の画像比率を維持
===================== */
@media (max-width: 768px) {
  /* 店舗画像ギャラリーと商品ギャラリーの共通設定 */
  .sakimoto-gallery__scroll img {
    width: auto !important;  /* 幅を自動調整 */
    height: 180px !important; /* 高さを固定 */
    object-fit: contain !important; /* 画像の比率を維持 */
  }
}

@media (max-width: 480px) {
  /* さらに小さな画面向けの設定 */
  .sakimoto-gallery__scroll img {
    width: auto !important; /* 幅を自動調整 */
    height: 150px !important; /* 高さを固定 */
    object-fit: contain !important; /* 画像の比率を維持 */
  }
  
  /* ギャラリー全体のパディングも調整 */
  .sakimoto-gallery {
    padding: 40px 0 !important;
  }
  
  /* スクロール要素の隙間を調整 */
  .sakimoto-gallery__scroll {
    gap: 10px !important;
  }
}

/* =====================
   文章の改行をSP版のみ自動調整(PC版は元のまま)
===================== */

/* PC版は元のスタイルを維持（変更なし） */
.sakimoto-concept__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

.sakimoto-space__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

.sakimoto-eatin__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

.sakimoto-takeout__description p {
  font-size: 15px;
  line-height: 2;
  color: #666;
  margin-bottom: 10px;
}

/* タブレット以下: 自動改行に切り替え */
@media (max-width: 768px) {
  .sakimoto-concept__description p,
  .sakimoto-space__description p,
  .sakimoto-eatin__description p,
  .sakimoto-takeout__description p {
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 0; /* 段落間の余白を削除 */
    display: inline; /* インライン表示で自動改行 */
  }
  
  /* 親要素の設定 */
  .sakimoto-concept__description,
  .sakimoto-space__description,
  .sakimoto-eatin__description,
  .sakimoto-takeout__description {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* スマホ: さらに調整 */
@media (max-width: 480px) {
  .sakimoto-concept__description p,
  .sakimoto-space__description p,
  .sakimoto-eatin__description p,
  .sakimoto-takeout__description p {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* 確認画面用テーブル */
.c-form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.c-form-table th,
.c-form-table td {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

.c-form-table th {
  background: #fafafa;
  font-weight: 400;
  width: 30%;
  color: #333;
}

.c-form-table td {
  color: #666;
}

/* ボタングループ */
.c-form-button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.c-form-button-group input[type="submit"],
.c-form-button-group input[type="button"] {
  padding: 20px 60px;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.c-form-button-group input[type="submit"]:hover {
  background: #d4a574;
  border-color: #d4a574;
  color: #fff;
}

.c-form-button-group input[type="button"]:hover {
  background: #f5f5f5;
}

@media (max-width: 768px) {
  .c-form-table {
    display: block;
  }
  
  .c-form-table tbody {
    display: block;
  }
  
  .c-form-table tr {
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
  }
  
  .c-form-table th,
  .c-form-table td {
    display: block;
    width: 100%;
    border: none;
    padding: 10px 0;
  }
  
  .c-form-table th {
    background: none;
    font-weight: 400;
    margin-bottom: 5px;
  }
  
  .c-form-button-group {
    flex-direction: column;
    gap: 15px;
  }
  
  .c-form-button-group input[type="submit"],
  .c-form-button-group input[type="button"] {
    width: 100%;
    padding: 15px 40px;
  }
}

/* =====================
   MW WP Form - 項目名下の余白調整
===================== */

/* 項目名（c-form-ttl-in / c-form-content）の下に余白を追加 */
.c-form-in .c-form-ttl-in,
.c-form-in .c-form-content {
  display: block;
  margin-bottom: 1em; /* 1行分の余白 */
}

/* 0.5行分の余白が欲しい場合は以下に変更 */
/*
.c-form-in .c-form-ttl-in,
.c-form-in .c-form-content {
  display: block;
  margin-bottom: 0.5em;
}
*/

/* エラーメッセージの余白も調整（必要に応じて） */
.c-form-in .c-form-error {
  display: block;
  margin-bottom: 0.5em;
}

/* 必須マーク（*）のスタイル調整 */
.c-form-required {
  color: #c60d0d;
  margin-left: 0.3em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .c-form-in .c-form-ttl-in,
  .c-form-in .c-form-content {
    margin-bottom: 0.8em; /* スマホでは少し小さめ */
  }
}

@media (max-width: 480px) {
  .c-form-in .c-form-ttl-in,
  .c-form-in .c-form-content {
    margin-bottom: 0.7em;
  }
}