@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイル（完全統合版）
************************************/

/* ============================
   Base（背景・フォント）
============================ */
body {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 !important;
  padding: 0 !important;
}

html,
body {
  width: 100% !important;
  overflow-x: hidden !important;
  background: #0d1117 !important;
}

/* ============================
   全セクション基本
============================ */
.section {
  padding: 80px 20px;
  text-align: center;
  background: #2b1508;
}

.inner {
  max-width: 900px;
  margin: auto;
}

.sec-title {
  font-size: 28px;
  margin-bottom: 40px;
  letter-spacing: 2px;
  font-weight: 700;
}

/* ダーク背景（変更箇所） */
.section-dark {
  background: linear-gradient(to bottom, #0d1117 0%, #161b22 100%);
}

/* ============================
   HERO
============================ */
.hero-bg {
  width: 100%;
  height: 85vh;
  background-size: cover;
  background-position: center;
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.hero-bg-1 {
  background-image: url('/wp-content/uploads/2025/12/store_07.jpg');
}

.hero-bg-2 {
  background-image: url('/wp-content/uploads/2025/12/store_09.jpg');
}

.hero-bg-3 {
  background-image: url('/wp-content/uploads/2025/12/store_11.jpg');
}

.catch,
.subcatch,
.price {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.swiper.heroSwiper {
  position: relative;
  width: 100%;
  height: 85vh;
}

.hero-fixed-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  width: 100%;
  padding: 0 20px;
}

.catch {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
}

.subcatch {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.price {
  font-size: 22px;
  color: #ffdf7e;
  line-height: 1.6;
}

/* スマホでの改行調整用 */
.sp-br {
  display: none;
}

/* ============================
   SYSTEM
============================ */
.price-box {
  display: inline-block;
  margin-top: 10px;
}

.price-big {
  font-size: 38px;
  font-weight: 700;
}

.price-sub {
  font-size: 18px;
  margin-top: 5px;
}

.system-image {
  margin: 40px 20px;
}

.system-image img {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.menu-list,
.info-list,
.pay-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 auto;
  text-align: left;
  display: inline-block;
  font-size: 18px;
  line-height: 2;
}

/* ============================
   SNS
============================ */
.sns-links {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sns-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 18px;
  border-radius: 50px;
  /* ←残す（ボタンのみ） */
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
  background: #111;
  border: 1px solid #333;
}

.sns-btn img {
  width: 22px;
  height: 22px;
  display: block;
}

.sns-btn.insta:hover {
  border-color: #f5a623;
}

.sns-btn.line:hover {
  border-color: #00b900;
}

.sns-btn:hover {
  opacity: 0.85;
}

/* ============================
   GALLERY（Swiper）
============================ */
.mySwiper {
  width: 100%;
  max-width: 900px;
  margin: auto;
}

.mySwiper img {
  width: 98%;
  display: block;
  object-fit: cover;
  margin: 0 auto;
}

.swiper-pagination-bullet {
  background: #555;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #fff !important;
}

/* ============================
   ACCESS MAP
============================ */
.map-wrap {
  margin-top: 30px;
  overflow: hidden;
}

/* ============================
   Cocoon の白背景・枠を全削除
============================ */
#header-container,
.header-container,
#header {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#content,
.article,
.entry-content,
.wrap,
.entry,
.content,
.article-body,
.article-container,
.main,
.l-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.container,
#wrapper,
#main,
#main .container,
#content-in,
#body-in,
#main-in,
.l-container,
.body,
.body-in {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.article,
.article .article-body {
  border: none !important;
}

.page .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

.container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================
   フッター黒統一
============================ */
#footer,
#footer-in,
.footer,
.footer-in,
#site-footer {
  background: #0d1117 !important;
  color: #fff !important;
  padding: 20px 0 !important;
  margin: 0 !important;
  border: none !important;
}

#footer a {
  color: #fff !important;
}

/* アニメーション初期状態 */
.fade-up {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* 表示トリガー後 */
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/************************************
** レスポンシブ
************************************/
@media screen and (max-width: 1023px) {
  .catch {
    font-size: 32px;
  }
}

@media screen and (max-width: 834px) {
  .sec-title {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {

  /* HERO テキスト改行を活かす */
  .sp-br {
    display: inline;
  }

  .catch {
    font-size: 26px;
  }

  .subcatch {
    font-size: 15px;
  }

  .price-big {
    font-size: 30px;
  }

  /* スマホ時の縦長崩れ防止 */
  .hero-fixed-text {
    padding: 0 10px;
    width: 100%;
  }

  .hero-bg-1 {
    background-image: url('/wp-content/uploads/2025/12/store_02.jpg');
  }

  .hero-bg-2 {
    background-image: url('/wp-content/uploads/2025/12/store_04.jpg');
  }

  .hero-bg-3 {
    background-image: url('/wp-content/uploads/2025/12/store_12.jpg');
  }
}