@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poller+One&display=swap');
/* =========================================
   CSS変数 (フォント、カラー、サイズ管理)
   ========================================= */ :root {
  /* フォント名の指定 */
  --font-gothic: 'Noto Sans JP', sans-serif;
  --font-poller: 'Poller One', cursive;
  /* ドキュメントの最大幅 / インナー幅 */
  --max-width: 1440px;
  --inner-width: 1120px;
  /* カラーパレット */
  --color-text: #333333;
  --color-green: #005b34;
  --color-green-light: #517e5a;
  --color-green-dark: #1E2F21;
  --color-brown: #604c3f;
  --color-brown-dark: #5c4033;
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --color-line: #06C755;
  --color-fb: #1877F2;
}
/* =========================================
   ベースリセット & 共通スタイル
   ========================================= */
* {
  box-sizing: border-box;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-left: 0px;
}
html, body {
  overflow-x: hidden;  /*横方向のはみ出しを強制的にカットする */
  width: 100%;
}

body {
  font-family: var(--font-gothic) !important;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  font-weight: 500;
  font-feature-settings: "halt"1;
  text-spacing-trim: space-all;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  height: auto;
  vertical-align: bottom;
  margin-top: 0px;
  width: 100%;
}
/* 汎用クラス・ユーティリティ */
.font-mincho {
  font-family: var(--font-mincho);
}
.text-center {
  text-align: center;
}
/* 汎用余白・テキストクラス（インラインスタイル置換用） */
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.text-sm {
  font-size: 0.9rem;
}
.text-xs {
  font-size: 0.8rem;
}
.w700 {
  font-weight: 700;
}
.w900 {
  font-weight: 900;
}
.text-m {
    margin-top: 0px;
    position: relative;
}
.sp-only {
  display: none!important;
}
.pc-only {
  display: block;
}
.text-green {
  color: var(--color-green) !important;
}
/* セクションタイトル */
.sec-title {
    position: relative;
    font-size: clamp(1.5rem, 4vw, 2rem); /* 画面に合わせて大きさが変わる */
    color: var(--color-green);
    text-align: center;
    font-family: var(--font-poller);
    letter-spacing: -0.01em;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 0px; /* 文字と線の間の余裕 */
    z-index: 1; /* 背景より上に表示 */
    margin-bottom: 40px; /* 下の要素との余白 */
    display: inline-block;
    margin-top: 20px;
    padding-top: 0px;
}
/* 1. 画面幅（コンテナ幅）で拡縮する薄い横ライン */
.sec-title::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央へ */
  width: 100vw;
  height: 4px;
  background-color: #e0e0e0;
  bottom: -2px;
  z-index: -1;
}
/* 2. 中央の3色アクセントライン */
.sec-title::after {
  content: '';
  display: block;
  width: 100%; /* 文字幅と完全に一致させる */
  height: 4px; /* 線の太さ */
  /* 左: #005b34 / 中央: #604c3f / 右: #517e5a で3等分する指定 */
  background: linear-gradient(to right, #005b34 0%, #005b34 33.33%, #604c3f 33.33%, #604c3f 66.66%, #517e5a 66.66%, #517e5a 100%);
  margin-top: 20px;
}
.sec-title-dorip {
  position: relative;
  font-size: 28px; /* 画面に合わせて大きさが変わる */
  color: var(--color-green);
  text-align: center;
  font-family: var(--font-gothic) !important;
  letter-spacing: -0.01em; /* 文字間隔を広めに設定 */
  padding-bottom: 30px; /* 文字と線の間隔 */
  margin-bottom: 1px; /* 下の要素との余白 */
  line-height: 160%;
  font-weight: 900;
  vertical-align: middle;
}
/* =========================================
   背景+イラスト
   ========================================= */
#topics {
  background-image: url(common/img/bg_topics.jpg) !important;
  background-position: center top;
  width: 100% !important;
  background-size: cover;
  background-repeat: repeat;
}
.main.full-width-bg {
  background-image: url(common/img/bg_main.jpg);
  background-position: center top;
  background-attachment: fixed;
  width: 100% !important;
  background-size: cover;
  background-repeat: repeat;
}
/* レイアウト枠 */
.document-wrapper {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  /* 全体の最小高さを画面高さにする（フッター分を引くのがコツ） */
  min-height: 100vh;
  /* フッターが中に入り込まないよう、フッターの高さ分だけパディングを空ける */
  padding-bottom: 270px;
  box-sizing: border-box;
}
.inner-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    padding-top: 30px;
}
#secrets.inner-container {
  padding-top: 30px !important;
}
/* 画像プレースホルダー */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
  border: 1px dashed #bbb;
}
/* =========================================
   右側固定メニュー (スクロール追従)
   ========================================= */
.fixed-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ハンバーガーボタン */
.hamburger-btn {
  width: 60px;
  height: 60px;
  background-color: var(--color-brown-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 全体を中央へ */
  cursor: pointer;
  border: none;
  padding: 0;
  gap: 4px; /* MENUという文字と線の間隔 */
}
.hamburger-btn:not(.is-active):hover {
  background-color: #7a5f4f; /* ここはお好みの明るい茶色に変えて調整してください */
  opacity: 0.8; /* ほんの少し透過させると馴染みます */
  cursor: pointer;
}
.hamburger-lines {
  position: relative;
  width: 30px;
  height: 20px; /* spanの高さと余白の合計 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger-lines span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #FFFFFF;
  transition: all 0.3s ease;
}
.hamburger-btn .menu-txt {
  font-size: 10px;
  letter-spacing: -0.5px;
  color: #FFFFFF;
  font-family: var(--font-poller);
  width: auto;
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-active .hamburger-lines span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* ひとつのブロックとして追従するSNSアイコン */
.fixed-sns {
  display: flex;
  flex-direction: column;
  width: 70px;
  padding-top: 6px;
  z-index: 100;
  opacity: 1;
}
.fixed-sns.is-hidden {
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  display: none;
}
.fixed-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 60px;
  color: var(--color-white);
  font-weight: bold;
  font-size: 12px;
}

.fixed-sns a:hover {
opacity: 0.7;
} 

.fixed-sns i.f-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: var(--color-white);
    font-size: 26px;
    border-radius: 50px;
    background-color: #517e5a;
}


.fixed-sns .f-line {
  background-image: url(common/img/f-line.png);
  background-size: 50px auto;
  background-position: center center;
  background-repeat: no-repeat;
}
.fixed-sns .f-fb {
  background-image: url(common/img/f-fb.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50px auto;
}
.fixed-sns .f-mail {
  
}
/* 右横スライドメニュー */
.slide-menu-content {
  position: fixed;
  top: 0;
  right: -100%;
  width: 350px;
  height: 100vh;
  background-color: var(--color-brown-dark);
  transition: right 0.6s cubic-bezier(0.8, 0, 0.1, 1);
  z-index: 999;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #FFFFFF;
  padding-top: 40px;
}
.slide-menu-content.is-active {
  right: 0;
  transition: right 0.3s cubic-bezier(0.1, 0, 1, 1);
}
.slide-menu-content.is-active {
  right: 0;
}
/* ロゴ配置 */
.menu-logo {
  text-align: left;
  margin: 0;
}
.menu-logo-img {
  width: 100px;
  height: auto;
}
/* ナビゲーション */
.menu-nav {
  margin-left: -30px;
  margin-right: -30px;
}
.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-nav li {
    border-bottom: 1px solid #000000;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    transition: background-color 0.3s ease;
}

.menu-nav li:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.menu-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  font-family: var(--font-poller);
  letter-spacing: 2px;
   transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s;
}

.menu-nav li:hover a {
  transform: translateX(10px);
  opacity: 0.7;
  }

.menu-nav a i {
  font-size: 10px;
  opacity: 1;
  transition: transform 0.3s ease;
}

.menu-nav li:hover a i {
  transform: translateX(-5px); /* アイコンは逆に動かすと対比が出てモダンです */
}



/* 左端のアイコン */
.menu-nav a i {
  font-size: 10px;
  opacity: 1;
}
/* SNSアイコンエリア */
.menu-sns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.menu-sns a {
  color: #FFFFFF;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.3s;
}

/*
.f-line {
    font-size: 36px; 
    color: #FFFFFF; 
    text-decoration: none;  
}
*/

.menu-sns .f-line {
    font-size: 36px; /* アイコンサイズ */
    color: #564032;  /* 元の色を指定 */
    text-decoration: none; 
    transition: transform 0.3s ease;
}


.menu-sns .f-line a:hover {
transform: scale(1.1);
opacity: 0.8;
}

.sns-fb i {
  display: flex;
  font-size: 26px;
  align-items: flex-end; /* 垂直方向を「下詰め」に変更 */
  padding-bottom: 0px; /* 微調整：円の底ギリギリにするための余白 */
  padding-top: 8px; /* 中央を無視するため上パディングを0に */
  overflow: hidden;
}
.sns-mail i {
  font-size: 15px;
}
.sns-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px; /* 円の直径（サイズ調整はここ） */
  height: 32px;
  background-color: #ffffff;
  border-radius: 50%;
  color: #564032 ! important; /* アイコンの色（背景色と同じ色にすると、白抜きのように見えます） */
  text-decoration: none;
  transition: transform 0.3s ease;
}
.sns-circle:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.sns-icon-img {
    color: #604c3f;  
}

.sns-circle2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px; /* 円の直径（サイズ調整はここ） */
  height: 32px;
  background-color: #ffffff;
  border-radius: 50%;
  color: #564032 ! important; /* アイコンの色（背景色と同じ色にすると、白抜きのように見えます） */
  text-decoration: none;
  transition: transform 0.3s ease;
}
.sns-circle2:hover {
  transform: scale(1.1);
  opacity: 0.8;
}


@media screen and (max-width: 480px) {
  .slide-menu-content {
    width: 80%;
  }
}
/* =========================================
   HERO (ファーストビュー)
   ========================================= */
/* HEROセクションの背景設定 */
.hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: 150px;
  background: radial-gradient(circle, #fcfcfc 40%, #f0f0f0 100%);
  /* 念のため他要素に影響しないよう以下を追加 */
  box-sizing: border-box;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(common/img/hero-coffee-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 720px;
  max-height: 90vh;
}
/* 画面左上のロゴ（全幅の中でも左端に固定） */
.top-left-logo {
    position: fixed;
    top: 30px;
    /* 1440pxの最大幅の内側に合わせるための計算 */
    left: 30px;
    z-index: 1000;
    display: block;
    width: 80px;
}
/* メモ帳ブロックの拡縮設定 */
.hero-main-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
}
.memo-pad {
  width: 1060px; /* 画面に対するメモ帳の横幅比率 */
  aspect-ratio: 16 / 9; /* メモ用紙の色 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url(common/img/hero-memo-bg.png);
  background-repeat: no-repeat;
  background-position: center 120px;
  padding-top: 60px;
  padding-left: 60px;
  padding-right: 10px;
  padding-bottom: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 30px;
  height: 750px;
  background-size: cover;
}
/* テキストのスタイル */
.memo-content {
  width: 90%;
  text-align: center;
  color: #333;
  max-width: 750px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
.memo-content h1 {
  width: 100%;
  letter-spacing: -0.5px;
  word-spacing: -0.5px;
  font-weight: 900;
  font-size: 2.8rem;
  margin-left: 10px;
  margin-top: 20px;
}
.main-text {
    width: auto;
    height: auto;
    margin-top: 0px;
    max-width: none;
}
.sub-text {
    margin-top: 0px;
}
.text-green {
  color: #005b34;
}
.description {
  font-size: 1.2rem;
  margin-top: 20px;
  line-height: 180%;
  font-weight: 600;
}
/* 下部イラストエリア */
.java-illustration-block {
  width: 100%;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-right: 30px;
}
.java-illustration-block img {
  width: 100%;
  height: auto;
  margin-left: 30px;
}
/* =========================================
   TOPICS
   ========================================= */
#topics {
  position: relative; /* これがないと背景画像が外に飛び出してしまいます */
  overflow: visible; /* 万が一、画像が横幅を突き抜けた時の制御 */
}
/* 左側の葉っぱ */
#topics::before {
  content: "";
  position: absolute;
  top: 10%; /* 上からの位置（調整してください） */
  left: -50px;
  width: 300px; /* 葉っぱ画像の横幅 */
  height: 100%; /* 高さはセクションに合わせて伸びる */
  background-image: url(common/img/bg-topics-left.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  z-index: 0; /* 文字より背面に配置 */
  pointer-events: none; /* クリックを邪魔しないようにする */
}
/* 右側の葉っぱ */
#topics::after {
  content: "";
  position: absolute;
  top: 20%; /* 上からの位置（左と同じに） */
  right: -100px;
  width: 400px; /* 葉っぱ画像の横幅 */
  height: 100%;
  background-image: url(common/img/bg-topics-right.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  z-index: 5; /* 文字より背面に配置 */
  pointer-events: none; /* クリックを邪魔しないようにする */
}
/* 1. 吊り下げバナー全体 */
.topics-hanging-banner {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  background-color: #604c3f; /* PDFの画像に近いベージュ色 */
  padding: 15px 40px;
  color: #333;
  margin-top: 40px; /* 紐の分の余白を確保 */
  margin-bottom: 40px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* 紐 (四角形の枠線を45度回転させて「ひし形の上半分」) */
.topics-hanging-banner::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  width: 32px;
  height: 32px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: translateX(-50%) rotate(-45deg);
  z-index: -1;
}
/* 頂点のピン (黒い丸) */
.topics-hanging-banner::after {
  content: '';
  position: absolute;
  top: -26px; /* 紐の頂点にピタッと合わせる */
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
}
/* カップアイコン (後から画像を入れる用) */
.banner-icon {
  width: 30px;
  height: auto;
  margin-right: 10px;
  border: none;
  background-color: transparent;
}
/* ※画像が入るまでのダミー表示用 */
.banner-icon.img-placeholder::before {
  content: '☕';
  font-size: 1.5rem;
  color: #555;
}
/* 2. LINEリンクエリア */
.topics-line-area {
  margin-bottom: 30px;
}
.topics-line-link {
  display: inline-flex;
  flex-direction: column; /* アイコンと文字を縦並びに */
  align-items: center;
  gap: 10px; /* アイコンと文字の隙間 */
  transition: opacity 0.3s;
}
/*
.topics-line-link:hover {
  opacity: 0.7;
}
*/


/* 2. アイコン部分（白背景の丸） */
.line-app-icon {
  display: flex; /* アイコン(LINEのロゴ)を円の真ん中に置く */
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 60px; /* 円のサイズ */
  height: 60px;
  border-radius: 50%; /* 丸くする */
  color: #00B900; /* LINEの緑色 */
}
/* LINEのテキスト */
.line-app-text {
  color: var(--color-green);
  font-weight: 700;
  font-size: 1.2rem;
}
.topics-note-bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(common/img/topics-note-bg.png);
  max-width: 650px;
  height: auto;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-height: 550px;
  padding-top: 90px;
  padding-bottom: 80px;
  padding-left: 30px;
  padding-right: 30px;
}
.topics-sns-group {
  text-align: center;
}
/* SNSへの案内文 */
.sns-intro {
  font-size: 18px;
  margin-bottom: 40px;
  font-family: var(--font-gothic) !important;
  padding-top: 0px;
  font-weight: 600;
  max-width: none;
}
/* アイコンを並べるコンテナ */
.sns-icons-list {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上揃え */
  gap: 50px;
  margin-top: 20px;
}
/* リンク全体のスタイル */
.sns-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.icon-box {
  width: auto;
  height: 50px; /* 高さを60pxに固定して縦伸びを防ぐ */
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box02 {
  width: auto;
  height: 50px; /* 高さを60pxに固定して縦伸びを防ぐ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box-youtube {
    width: 140px;
    height: 50px; /* 高さを60pxに固定して縦伸びを防ぐ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 18px;
}

.icon-box-youtube img {
height: 32px; /* 高さを60pxに固定して縦伸びを防ぐ */
}


/* アイコン画像 */
.icon-box img, .icon-box02 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 画像を歪ませずに枠内に収める */
  height: auto;
}
/* 準備中テキスト */
.sns-status {
  font-size: 0.8rem;
  color: #000;
  margin: 0;
  padding-top: 5px; /* アイコンとの距離 */
  text-align: center;
  width: 100%;
}
.sns-icon:hover {
  opacity: 0.6;
}



.sns-icon.nohover:hover {
  opacity: 1;
  cursor:default;
}

.inner-text {
  font-size: 20px;
}
/* =========================================
   STORY セクション (コラージュ画像レイアウト)
   ========================================= */
.section-story {
    margin-top: 30px;
    margin-bottom: 50px;
}
/* 全体のコンテナ */
.story-collage-container {
  position: relative;
  width: 100vw;
  margin-top: 40px;
  margin-bottom: 0;
  background-image: url(common/img/bg_story-collage.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150% auto;
  aspect-ratio: 1630 / 520;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-height: 580px;
  text-align: center;
}
.story-collage-container img {
  width: 96% !important;
  height: auto;
  object-fit: cover; /* 比率を保って隙間なく埋める場合 */
  max-width: 900px;
  display: inline-block;
}
/* タイトルとサブタイトルを重ねる */
.story-title-overlay {
  position: relative;
  top: 5%; /* 画像の上の位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 10;
}
.subtitle {
  font-size: 28px;
  font-weight: 900;
  word-spacing: -0.5px;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
}
/* コンテンツ（本文）の位置調整 */
#story .inner-container {
  margin-top: 20px;
}
/* テキストコンテナ */
.story-text-container {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  color: #333;
  position: relative;
  padding: 0;
}
/* 各段落の余白 */
.story-paragraph {
  margin-bottom: 25px;
  margin-top: 40px;
  font-size: 18px;
}
/* 引用強調（中央配置・太字） */
.story-quote {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-brown);
  margin-top: 10px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 10px;
}
/* 締めくくり（茶色・太字） */
.story-closing {
  font-weight: 900;
  color: var(--color-brown);
  margin-bottom: 20px;
  font-size: 20px;
}
/* 最後のメッセージ */
.story-final {
  font-size: 18px;
  color: #333;
}
/* スマホ用調整 */
@media (max-width: 768px) {
  .story-quote {
    font-size: 1.2rem;
  }
  .story-closing {
    font-size: 1rem;
  }
}
/* =========================================
   ROAST
   ========================================= */
#roast {
    text-align: center;
    padding-top: 0px;
}
.roast-main-title {
  font-size: 1.4rem; /* STORYサブタイトルと同等 */
  text-align: center;
  margin-bottom: 10px;
}
.roast-main-subtitle {
  text-align: center;
  margin-bottom: 60px;
  font-size: 18px;
  margin-top: 20px;
}
/* メインレイアウト（左：画像 / 右：テキスト） */
.roast-process {
  margin-bottom: 40px;
  margin-top: 40px;
}
.roast-content-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--inner-width);
  margin-left: auto;
  margin-right: auto;
}
/* 左右入れ替えの魔法 */
.roast-process.reverse .roast-content-wrapper {
  flex-direction: row-reverse;
}
.roast-image-area {
  flex: 0 0 45%;
  max-width: 45%;
}
.roast-text-area {
  flex: 1;
  min-width: 0;
}
/* フレーム（画像エリア） */
.roast-photo-frame {
  width: 90%;
  margin: 0;
}
.roast-photo-frame03 {
    margin: 0;
}
.roast-phoro_01 {
  max-width: 510px;
  max-height: 336px;
  height: auto;
}
.roast-phoro_02 {
  max-width: 534px;
  max-height: 397px;
  height: auto;
}
.roast-phoro_03 {
    max-width: 351px;
    max-height: 290px;
    height: auto;
    
}
.roast-phoro_04 {
    max-width: 470px;
    max-height: 314px;
    height: auto;
    margin-top: 0px;
}
/* テキストエリア */
.roast-text-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.roast-icon01 {
  width: 39px;
  height: 47px;
}
.roast-icon02 {
  width: 46px;
  height: 34px;
}
.roast-icon03 {
  width: 51px;
  height: 35px;
}
.roast-icon04 {
  width: 73px;
  height: 63px;
}
.roast-text-title {
  font-size: 26px;
  color: #5c4033;
  margin: 0;
  letter-spacing: -0.5px;
  word-spacing: -0.5px;
  font-weight: 900;
  text-align: left;
}
.roast-paragraph {
  line-height: 1.8;
  font-size: 18px;
  text-align: left;
}
/* 仕切り線 */
.roast-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-brown);
}
/* =========================================
   SECRETS
   ========================================= */
/* 全幅スライダーのためのCSS調整 */
#secrets {
  position: relative;
  width: 100vw; /* ブラウザの全幅を強制 */
  left: 50%; /* 左端を画面中央へ */
  margin-left: -50vw; /* 画面幅の半分だけ左にずらすことで中央へ調整 */
  margin-right: -50vw;
  max-width: 100vw !important;
  box-sizing: border-box;
  margin-top: 60px;
  margin-bottom: 60px;
  background-image: url(common/img/bg_secrets.jpg);
  background-repeat: repeat;
  background-size: cover;
  background-position: center center;
}
.t70p {
  font-size: 70%;
  vertical-align: middle;
}
.t-black {
  color: #000000;
}

.secrets-slider {
	max-width: 1440px; /* ここを調整すればカードの合計幅を制御可能 */
	margin: 0 auto;
    
}

/* カードデザイン */
.secret-card {
  background: #fff;
  border-radius: 8px;
  padding-top: 30px;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 50px;
  margin: 0 15px; /* スライド間の隙間 */
  text-align: center;
  max-width: 470px !important;
  position: relative;
}
.secret-number {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  /* 正円を作るためのサイズ指定 */
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--color-green-light); /* PC設定に合わせてください */
  color: #FFFFFF;
  border-radius: 50% !important;
  font-family: var(--font-poller); /* 設定されているフォント */
  z-index: 10;
}
.secret-img {
  width: auto;
  height: 130px;
  margin: 0 auto 20px;
}
.secret-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  text-align: left;
  font-weight: 900;
}
.secret-desc {
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
}
.text-green {
  color: #005b34;
  font-weight: 900;
}
/* ナビゲーション全体（番号と矢印） */
.custom-nav-wrapper {
  display: flex !important;
  flex-direction: row !important; /* 横並びを維持 */
  justify-content: center !important; /* これで全体を中央に */
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important; /* ★左の50pxパディングを解除 */
  margin: 30px auto 0 auto !important; /* 上余白30px、左右はautoで中央へ */
  gap: 20px !important;
}
/* 矢印ボタンのデザイン */
.nav-arrow {
  width: 40px;
  height: 40px;
  color: var(--color-text);
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border-style: none;
  background-color: transparent;
}
.nav-arrow:hover {
  color: var(--color-green-light);
}
.custom-dots {
  display: flex !important;
  justify-content: center !important; /* これも中央へ */
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 20px !important;
}

.custom-dots .dot-btn:nth-child(8) {
    display: none !important;
}

.dot-btn {
  width: 30px;
  height: 30px;
  font-size: 0.9rem !important;
  margin: 0 !important;
  color: #FFFFFF;
  background: var(--color-text);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
  border-style: none;
  font-family: var(--font-poller);
  position: relative;
  text-align: center;
  display: flex !important; /* blockから変更 */
  align-items: center; /* 縦位置を中央に */
  justify-content: center; /* 横位置を中央に */
  padding: 0 !important;
}
.dot-btn.active, .dot-btn:hover {
  background: var(--color-green-light);
  color: #fff;
}

.secrets-slider {
  margin: 0 auto !important;
  max-width: 1440px;
}
.slick-track {
  display: flex !important;
  align-items: stretch !important;
}
/* スライド要素の高さを100%にして追従させる */
.slick-slide {
  display: flex !important;
  height: auto !important;
}
.slick-slide > div {
  height: 100%;
}
.secret-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 説明文エリアをFlexboxの残りのスペースで自動調整 */
.secret-desc {
  flex-grow: 1; /* ここが重要：余ったスペースを埋める */
  text-align: left;
}
/* =========================================
   DRIP IMG
   ========================================= */
#dripper-mechanism {
  max-width: var(--inner-width);
  padding-top: 90px;
  padding-right: 70px;
  padding-bottom: 50px;
  padding-left: 70px;
  background-image: url(common/img/bg_secrets.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.gslide-image img {
  background-color: #FFFFFF;
  padding: 15px;
  border: 10px solid #565656;
}
#dripper-mechanism .glightbox {
  display: block;
  position: relative;
  cursor: pointer;
}
#dripper-mechanism .diagram-img {
  transition: transform 0.4s ease, opacity 0.3s ease;
}
#dripper-mechanism .glightbox:hover .diagram-img {
  transform: scale(1.03);
  opacity: 0.7;
}
#dripper-mechanism .glightbox {
  display: block;
  position: relative;
  cursor: pointer;
}
/* --- セクション自体のデザイン（スケッチブック感） --- */
.full-width-sketchbook {
  padding: 60px 0;
  text-align: center;
  position: relative;
  background-image: url(common/img/bg_secrets.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.click-hint {
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: 2px;
  color: #888;
  margin-top: 15px;
  display: inline-block;
  border-bottom: 1px solid #888;
  padding-bottom: 5px;
  transition: all 0.3s;
}
/* ホバー時に少し動くアニメーション */
.full-width-sketchbook a:hover .click-hint {
  transform: translateY(-3px);
  color: #564032;
  border-color: #564032;
}
/* GLightboxの画像表示コンテナに対して横幅を制限する */
.glightbox-container .gslide-media {
  max-width: 94vw !important;
  width: 94vw !important;
  margin: 0 auto !important;
}
/* 画像そのものもコンテナに合わせて縮小させる */
.glightbox-container .gslide-image img {
  max-width: 100% !important;
  height: auto !important;
}
/* スマホ対応 */
@media (max-width: 768px) {
  .roast-content-wrapper, .roast-process.reverse .roast-content-wrapper {
    flex-direction: column;
    gap: 30px;
  }
  .roast-image-area {
    width: 100%;
  }
}
/* =========================================
   FOLLOW US
   ========================================= */
#follow-us {
  margin-top: 50px;
}
/* 画像枠（幅1120px, 高さ240px固定） */
.follow-img {
  width: 100%;
  max-width: 1120px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
  position: relative;
  display: block;
}
/* 中に画像が入った場合、歪まずにトリミングされる設定 */
.follow-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 0px;
}
/* 縦線で区切るステップ装飾 */
.flow-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* スマホで折り返し */
  margin-top: 0px;
}
.flow-step {
  display: flex;
  align-items: center;
  font-weight: 900;
  color: var(--color-green);
  font-size: 20px;
  padding-bottom: 10px;
}
.bean-icon {
  width: auto; /* 豆アイコンのサイズ */
  height: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* キャンペーンバナー全体 */
.follow-banner {
  padding: 40px 20px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  background-image: url(common/img/bg_topics.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

/* margin-bottom: 40px;margin-top: 40px; */
.follow-intro-text {
  margin-bottom: 1px;
  line-height: 1.6;
  color: #000000;
  margin-top: 20px;
  font-size: 18px;
}

/* バナーのテキストとバッジの並び */
.follow-banner-lead {
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* バッジと文字の隙間 */
  margin-bottom: 30px;
  font-size: 18px;
}
/* 緑色のバッジ */
.follow-banner .badge {
  background-color: var(--color-green); /* 指定の緑色 */
  color: var(--color-white);
  padding: 4px 20px;
  font-size: 0.85rem;
  font-weight: 600; /* バッジ内の文字は太くしない */
  margin-top: 0px;
}
.line-app-icon {
  font-size: 70px; /* アイコンサイズ */
  color: #00B900; /* LINEグリーン */
  vertical-align: middle;
  margin-right: 10px;
  max-height: none;
}
/* テキストのスタイル */
.line-app-text {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 900;
}
/* =========================================
   PHILOSOPHY (縦書きセクション)
   ========================================= */
#philosophy {}
/* PHILOSOPHY全体の調整 */
.philosophy-visual {
  position: relative;
  width: 100vw;
  margin-top: 40px;
  background-image: url(common/img/bg_story-collage.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 150% auto;
  aspect-ratio: 1094 / 546;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 40px;
}
.philosophy-visual img {
  width: 98% !important;
  height: auto;
  object-fit: cover; /* 比率を保って隙間なく埋める場合 */
  max-width: 1100px;
}
.philosophy-text-block {
  text-align: center;
  margin-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
}
.philosophy-main-title {
  font-family: var(--font-mincho);
  color: var(--color-green);
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: 900;
}
.philosophy-body {
  line-height: 2;
  max-width: 700px;
  margin: 0 auto;
  font-feature-settings: "halt"1;
  text-spacing-trim: space-all;
  font-size: 18px;
}
/* =========================================
   SHOP & CONTACT
   ========================================= */
#shop {
  text-align: center;
}
/* プロフィール全体 */
.profile-wrap {
  display: flex !important;
  justify-content: center;
  align-items: flex-start !important; /* ★これで写真とテキストが「上辺」で揃います */
  gap: 40px;
  margin-top: 80px;
}
/* 店主写真 */
.profile-img {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
  display: block;
  font-size: medium;
}
/* テキストエリア */
.profile-info {
  max-width: 500px;
  text-align: left;
  margin: 0;
  padding: 0;
  display: block;
}
.profile-info > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* h3扱いにするタイトル（茶系） */
.profile-heading {
  font-family: var(--font-mincho);
  color: #5c4033; /* 指定の茶色 */
  font-size: 24px;
  display: inline-block;
  padding-bottom: 5px;
  font-weight: 900;
  line-height: 0px;
  text-align: left !important;
}
.profile-text {
  line-height: 1.8;
  color: #333;
  text-align: left;
  margin-top: 30px;
  font-size: 18px;
}
/* ショップフッター調整 */
.shop-footer {
  margin-top: 40px;
}
.shop-notice {
  margin-bottom: 20px;
}
.tel-display {
  font-size: 1.4rem;
  font-weight: bold;
}
.form-note {
  font-size: 0.9rem;
  margin-top: 10px;
  color: #666;
}
/* =========================================
   FOOTER
   ========================================= */
.footer {
  background-color: #e2e0d4;
  padding-top: 170px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 40px;
  position: absolute;
  bottom: 0 !important;
  left: 0;
  width: 100%;
  z-index: 0;
  height: 500px;
  background-image: url(common/img/bg_footer.jpg);
  background-repeat: repeat;
  background-position: center bottom; /* 背景画像を下に合わせる */
  background-size: cover;
  clip-path: ellipse(54% 100% at 50% 104%);
}
/* 4要素を横並びにするコンテナ */
.footer-container {
  display: flex;
  justify-content: center; /* 全体を中央配置 */
  align-items: center; /* 垂直方向も中央揃え */
  gap: 30px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 40px;
  position: absolute;
  bottom: 10px; /* ここで下からの位置を自由に調整してください */
  left: 50%; /* 中央寄せのための設定 */
  transform: translateX(-50%); /* 中央寄せのための設定 */
  padding-top: 40px;
}
.footer-logo-img {
  width: 152px; /* PDFに合わせてサイズ調整 */
  height: auto;
  
}
.footer-sns {
  display: flex;
  gap: 15px; /* LINEとFacebookの間の余白 */
}
/* フッター内のSNSグループ配置 */
.footer-sns-images {
  display: flex;
  gap: 30px; /* アイコン間の余白 */
  align-items: center;
  margin-left: 20px;
}
/* フッター専用：画像アイコンのサイズ調整（もし大きすぎる場合） */
.footer-sns-images .f-line, .footer-sns-images .f-fb, .footer-sns-images .f-mail {
  display: block;
  width: 70px; /* 必要に応じてサイズを変更 */
  height: 70px; /* 必要に応じてサイズを変更 */
  background-size: contain; /* サイズに合わせて画像を縮小 */
  background-repeat: no-repeat;
  background-position: center;
}

.footer-sns-images .f-line:hover, .footer-sns-images .f-fb:hover, .footer-sns-images .f-mail:hover {
opacity: 0.7; 
}

.footer-sns-images .f-line {
  background-image: url(common/img/f-line.png);
}
.footer-sns-images .f-fb {
  background-image: url(common/img/f-fb.png);
}
/* フォームの見た目調整（フッターに重なるため） */
.form-placeholder {
  position: relative;
  z-index: 2; /* フォームをフッターより手前に出す */
  background-color: #fafafa;
  padding: 60px 20px;
  border-radius: 8px;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
}
/* =========================================
   装飾画像（コーヒー豆や葉）の配置用スタイル
   ========================================= */
/* 装飾画像の基準点とするためのクラス */
.relative-wrap {
  position: relative;
  z-index: 1;
}
/* 装飾画像の共通設定 */
.deco-img {
  position: absolute;
  z-index: -1; /* コンテンツの後ろに配置 */
  pointer-events: none; /* スマホなどでタッチ・クリックの邪魔をしない */
  max-width: none; /* 親要素の幅に制限されないようにする */
}

.deco-topics-left {
  top: -50px;
  left: -80px; 
  width: 150px; 
}

.deco-topics-right {
  bottom: -40px;
  right: -50px;
  width: 100px;
}

.deco-follow-left {
  bottom: 20px;
  left: -100px;
  width: 120px;
}

.my-custom-lightbox .gslide-inner-content {
  background: #fff; /* 背景を白に */
  padding: 20px; /* 画像の周りに余白 */
  border-radius: 8px; /* 角を丸く */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 影を落として浮き上がらせる */
}

.my-custom-lightbox .gslide-image img {
  border: 1px solid #eee; /* 薄い枠線 */
}

.glightbox-close {
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  color: #fff !important;
  top: 10px !important;
  right: 10px !important;
}
/* =========================================
   装飾画像のレスポンシブ対応
   ========================================= */

@media (max-width: 1200px) {
  .deco-img {
    opacity: 0.3; 
  }
  .deco-topics-left {
    left: 0; 
  }
  .deco-topics-right {
    right: 0;
  }
}
/* =========================================
   メディアクエリ (スマホ用レスポンシブ)
   ========================================= */
@media (max-width: 900px) {
  .roast-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .philosophy-wrap {
    gap: 30px;
  }
}
@media (max-width: 767px) {
  /* pc-onlyクラスを非表示 */
  .pc-only {
    display: none!important;
  }
  /* sp-onlyクラスを表示 */
  .sp-only {
    display: inline-block!important; /* もしくは inline-block など必要に応じて調整 */
  }
  .inner-container {
    padding: 0;
  }
  .deco-img {
    display: none;
  }
  .sec-title::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 4px;
    background-color: #FFFFFF;
  }
  .subtitle {
    font-size: 24px;
}
  /* =========================================
   HERO (ファーストビュー)
   ========================================= */
  .hero {
  height: 700px;
  max-height: 96vh;
}
    /* メモ帳ブロックの拡縮設定 */
  .hero-main-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 98%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    margin-top: 20px;
  }
  
  .memo-pad {
    width: 92%;
    max-width: 600px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    background-size: 100%;
    background-image: url(common/img/sp/hero-memo-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 !important;
    min-height: 690px !important;
    height: auto;
    position: relative;
  }
  .memo-content {
    width: 90%;
  }
  .memo-content h1 {
    margin: 0;
    font-size: 1.65rem; /* 必要に応じて調整してください */
    padding-top: 20px;
    letter-spacing: -1px;
  }
  .description {
    font-size: 1.05rem;
  }
  /* 画像が親要素からはみ出さないようにする */
  .java-illustration-block img {
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding-right: 0px;
    margin-left: 5px;
  }
  /* レイアウトの崩れを防ぐための基本設定 */
  * {
    box-sizing: border-box;
  }
  .hero {
    padding-top: 120px; /* スマホ用の上部余白 */
  }
  .top-left-logo {
    top: 15px;
    left: 15px;
    display: none;
  }
  .menu-sns {}
  /* 画像の切り替えと縦伸び解消 */
  .hero-img-pc {
    display: none;
  }
  .hero-img-sp {
    display: block;
    width: 100%;
    height: auto;
  }
  /* 縦書きの維持とスマホでの配置調整 */
  .vertical-text-hero {
    position: absolute;
    writing-mode: vertical-rl;
    font-size: 1.1rem; /* スマホ用に少し文字を小さく */
    /* スマホでも画像の上に突き抜けさせる */
    top: -80px;
    right: 11%;
  }
  .hero-line {
    padding: 20px 8px; /* スマホ用の白背景の余白 */
    margin: 0 5px; /* スマホ用の行間 */
  }
  .hero-bottom-area {
    margin-top: 30px;
  }
  /* =========================================
   TOPICS
   ========================================= */
  #topics::before {
    width: 120px; /* PCより小さめに設定 */
    height: 180px; /* 画像の縦比率に合わせて設定 */
    top: 12%; /* バナーやタイトルの高さに合わせて微調整 */
    background-size: contain;
    display: block !important; /* スマホでも表示する */
  }
  #topics::after {
    width: 170px; /* PCより小さめに設定 */
    height: 100%; /* 画像の縦比率に合わせて設定 */
    top: 12%; /* バナーやタイトルの高さに合わせて微調整 */
    background-size: contain;
    display: block !important; /* スマホでも表示する */
    background-image: url(common/img/bg-topics-right-sp.png);
    z-index: 0;
  }
  /* 左側の葉っぱ（少し左にはみ出させる） */
  #topics::before {
    left: -37px; /* ここをマイナスにすると、左端から少し隠れた状態になります */
  }
  /* 右側の葉っぱ（少し右にはみ出させる） */
  #topics::after {
    right: -60px; /* ここをマイナスにすると、右端から少し隠れた状態になります */
  }
  .topics-note-bg {
    width: 100%;
    max-width: none;
    margin-left: calc(50% - 50vw); /* 中央揃えを維持しつつ画面左端まで広げる */
    margin-right: calc(50% - 50vw);
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    padding-top: 40px;
    padding-bottom: 30px;
    max-height: none;
    height: auto;
    margin-top: 20px;
  }
  .sns-icons-list {
    display: flex !important;
    flex-wrap: wrap !important; /* 折り返しを許可 */
    justify-content: space-around;
    gap: 20px 0 !important;
    margin-top: 20px !important;
  }
  /* アイコン一つ一つを幅50%に設定して2列にする */
  .sns-icon {
    width: 40% !important;
    margin-bottom: 10px; /* 行間の余白 */
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }
  .sns-icon.right {
    align-items: flex-end;
    margin-right: 15px;    
  }
  .sns-icon.left {
    align-items: flex-start;
    margin-left: 15px;
  }
  .icon-box {
    width: 50px;
    height: 50px;
  }
  .icon-box02 {
    width: 140px;
    height: 50px;
  }
  .icon-box img, .icon-box02 img {
    width: 100% !important;
    height: auto;
    object-fit: contain;
  }
  .sns-status {
    margin-top: 5px;
    font-size: 12px;
  }
  .sns-status.left {
    text-align: left;
  }
  .topics-hanging-banner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #604c3f; /* PDFの画像に近いベージュ色 */
    padding: 15px 40px;
    color: #333;
    margin-top: 20px; /* 紐の分の余白を確保 */
    margin-bottom: 40px;
    max-width: 280px;
  }
  .inner-text {
    padding-left: 5%;
    padding-right: 5%;
  }
  .topics-sns-group {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  /* =========================================
   STORY
   ========================================= */
  .story-collage-container {
    position: relative;
    max-width: none; /* 画像の最大幅 */
    margin-top: 10px;
    margin-bottom: 0;
    background-size: 170% auto;
    aspect-ratio: 4 / 2.5;
  }
  /* テキストコンテナ */
  .story-text-container {
    padding-left: 5%;
    padding-right: 5%;
  }
  .story-flex {
    flex-direction: column;
    gap: 50px;
    margin-top: 60vw;
  }
  .story-text, .story-images {
    flex: 1 1 auto;
    width: 100%; /* 横幅いっぱいに */
  }
  .story-images {
    width: 85%; /* スマホの時は少し小さくして中央寄せ */
    margin: 0 auto;
  }
  .story-quote {
    font-size: 1.2rem;
  }
  /* =========================================
   ROAST
   ========================================= */
  /* メインレイアウト（左：画像 / 右：テキスト） */
  .roast-process {
    margin-bottom: 30px;
    margin-top: 20px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .roast-content-wrapper {
    display: flex !important;
    flex-direction: column !important; /* 強制的に縦並び */
    align-items: center; /* コンテンツを中央寄せ */
  }
  /* .reverseクラスがついていても、スマホでは通常順序にする */
  .roast-process.reverse .roast-content-wrapper {
    flex-direction: column !important;
  }
  /* 画像エリア・テキストエリアを幅100%に */
  .roast-image-area, .roast-text-area {
    width: 100% !important;
  }
  .roast-text-title {
    font-size: 22px;
    width: auto;
}
  .roast-text-area {
    margin-top: 0 !important;
    
  }
  .roast-image-area {
  flex: 0 0 90%;
  max-width: 90%;
}
.roast-text-area {
  flex: 1;
  min-width: 0;
}
  /* 縦並びになった時の余白調整 */
  .roast-image-area {
    margin-bottom: 0px !important;
    text-align: center;
  }
  .roast-paragraph {
    text-align: left; /* 本文は左寄せの方が見やすい場合が多いですが、好みで変更してください */
  }
  /* 画像サイズが崩れないように調整 */
  .roast-photo-frame img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }
  .roast-main-subtitle {
    text-align: left;
    margin-bottom: 60px;
    color: #666;
    font-size: 1rem;
    margin-top: 20px;
  }
  /* フレーム（画像エリア） */
  .roast-photo-frame {
    width: 90%;
    aspect-ratio: 4/2;
    margin-left: auto;
    margin-right: auto;
  }
  /* =========================================
   SECRETS
   ========================================= */
  /* 全幅スライダーのためのCSS調整 */
  #secrets {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .secret-card {
    transition: all 0.3s ease;    
  }
 
  #secrets.inner-container {
    padding-top: 30px !important;
    padding-bottom: 30px;
  }
  .sec-title-dorip {
    color: var(--color-green);
    text-align: center;
    font-family: var(--font-gothic) !important;
    padding: 0;
    letter-spacing: -0.01em; /* 文字間隔を広めに設定 */
    margin-bottom: 30px;
  }
  .custom-nav-wrapper {
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    width: 100%;
    gap: 5px !important; /* 矢印と数字の間の隙間を少し詰める */
    flex-wrap: wrap; /* 画面が狭い場合、折り返しを許可 */
    margin-top: 30px !important; /* 少し詰める */
  }
  /* 2. 番号ボタン（dot-btn）の縮小 */
  .dot-btn {
    width: 30px !important; /* 40px → 30px に小さく */
    height: 30px !important;
    font-size: 0.9rem !important; /* 文字も少し小さく */
  }
  /* 3. 矢印ボタン（nav-arrow）の縮小 */
  .nav-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 1.5rem !important;
    display: none;
  }
  /* =========================================
   DRIP IMG
   ========================================= */
  .full-width-sketchbook {
    padding: 30px 10px !important; /* スマホ用に余白をギュッと絞ります */
    background-size: cover; /* 背景画像は全画面にカバーさせる */
  }
  /* 2. 画像の表示調整 */
  .diagram-img {
    width: 100% !important; /* コンテナ幅いっぱいに拡大 */
    height: auto !important; /* 比率を維持 */
    display: block;
    margin: 0 auto; /* 中央揃え */
  }
  /* =========================================
   FOLLOW US
   ========================================= */
  /* 1. 写真画像を90%に */
  #follow-us .follow-img {
    margin: 20px auto 30px auto !important;
  }
  .flow-step {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 900;
    color: var(--color-green);
    font-size: 18px;
    height: auto;
  }
  .follow-intro-text {
    margin-bottom: 40px;
    line-height: 1.6;
    color: #000000;
    margin-top: 40px;
    font-size: 17px;
    padding-left: 4.5%;
    padding-right: 4.5%;
    text-align: left;
  }
  /* =========================================
   PHILOSOPHY (縦書きセクション)
   ========================================= */
  #philosophy {
    margin-bottom: 50px;
  }
  /* =========================================
   SHOP
   ========================================= */
  .profile-img {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    height: 60vw;
  }
  .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center calc(0% - 20px);
  }
  .profile-wrap {
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
  }
  .profile-info {
    padding-left: 5%;
    padding-right: 5%;
  }
  /* h3扱いにするタイトル（茶系） */
  .profile-info .profile-heading {
    text-align: left !important;
  }
  /* =========================================
   CONTACT
   ========================================= */
  .contact-intro {
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
  }
  /* =========================================
   FOOTER
   ========================================= */
  .footer {
    background-color: #ffffff !important;
    background-image: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 20px 0 0 0 !important; /* 下パディングは緑帯の余白にするので0 */
    position: absolute !important; /* 絶対配置を解除し、ページの流れに従わせる */
    height: auto !important; /* 500px固定を解除 */
    clip-path: none;
    z-index: 1000 !important;
  }
  /* 2. ロゴと緑の帯を縦に並べる */
  .footer-container {
    position: static !important; /* 位置の絶対指定を解除 */
    transform: none !important;
    display: flex !important;
    flex-direction: column !important; /* 縦並びに */
    align-items: center !important;    
    width: 100% !important;
    padding: 0 !important; /* 下部に緑バナー用の隙間を空ける */
  }
  
  .footer-fix {
    width: 100%;
}
  
  /* 3. ロゴのサイズ感をPDFの比率に調整 */
  .footer-logo-img {
    width: 120px !important; /* PDFのバランスに合わせて縮小 */
    height: auto;
    margin-bottom: 90px;
    
  }
  /* 4. 緑の帯（バナー）のスタイルを作る */
  .footer-sns-images {
    position: fixed !important; /* 画面最下部に張り付かせる */
    bottom: 0 !important;
    left: 0 !important;
    background-color: #005b34 !important; /* 深い緑 */
    margin-left: 0 !important;
    padding: 15px 10px !important;
    display: flex !important;
    justify-content: center !important; /* 中央寄せ */
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box;
    width: 100%;
    z-index: 1000 !important;
  }
  /* 5. PC版HTMLにない「白抜きテキスト」をCSSで強制挿入 */
  .footer-sns-images::before {
    content: "新豆情報・販売開始はLINEでお知らせ（準備中）";
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    order: 1; /* テキストを左に */
  }
  /* 6. LINEアイコンの調整 */
  .footer-sns-images .f-line {
    width: 32px !important; /* バナーに合わせて小さく */
    height: 32px !important;
    order: 2; /* アイコンを右に */
    margin: 0 !important;
  }
  /* 7. Facebookアイコンは非表示 */
  .footer-sns-images .f-fb {
    display: none !important;
  }
  /* ▼ ROAST ポイント一覧のスマホレイアウト変更 ▼ */
  .roast-points-wrap {
    flex-direction: column-reverse; /* 「下から上」の順に並び替える（文字が上、写真が下） */
    gap: 40px;
    margin-top: 60px;
  }
  .roast-points-img {
    width: 100%; /* 横幅いっぱいに広げる */
  }
  /* 写真を正方形に変更 */
  .roast-points-img img.img-placeholder, .roast-points-img img {
    aspect-ratio: 1 / 1; /* 正方形に固定する */
    object-fit: cover; /* 比率が変わっても画像が歪まないようにトリミング */
  }
  .roast-points-list {
    width: 100%;
  }
  /* キャンペーンバナーのテキストをスマホでは綺麗な縦並びに */
  .follow-banner-lead {
    display: flex;
    flex-direction: column; /* 確実に縦並びにする */
    align-items: center; /* 左右の中央に配置 */
    gap: 15px; /* バッジとテキストの隙間 */
    text-align: center;
  }
  /* バッジが押しつぶされて「キャン/ペーン」と改行されるのを完全に防ぐ */
  .follow-banner .badge {
    display: inline-block;
    white-space: nowrap; /* ★文字の折り返しを禁止する */
    margin: 0; /* 余計なマージンをリセット */
  }
  /* ▼ PHILOSOPHY スマホ用レイアウト ▼ */
  .philosophy-bg-img {
    height: 250px; /* スマホでは画像の高さを少し抑える */
  }
  .philosophy-text-wrap {
    padding-left: 5%; /* スマホでは少し左端に寄せる */
    padding-top: 20px;
    min-height: 400px; /* スマホ用に突き抜け分の高さを調整 */
  }
  .philosophy-vertical-text {
    font-size: 1.4rem; /* 文字を少し小さく */
    padding: 20px 10px;
  }
  .philosophy-content {
    position: static; /* スマホでは絶対配置を解除して下に落とす */
    margin-top: 40px; /* 縦書きとの隙間 */
    margin-left: 0; /* PC時の右ズラしをリセット */
    padding: 0 15px;
  }

  .main.full-width-bg {
    background-image: none;
    background-position: center top;
    background-attachment: fixed;
    width: 100% !important;
    background-size: cover;
    background-repeat: repeat;
    background-color: #FFFFFF;
  }
  /* =========================================
   PHILOSOPHY (縦書きセクション)
   ========================================= */
  #philosophy {}
.roast-photo-frame03 {
    width: 90%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
}
.text-m {
    margin-top: 0px;
}


}
@media (max-width: 480px) {
  .roast-cards {
    grid-template-columns: 1fr;
    margin-bottom: 30px;
  }
  .fixed-menu {
    width: 50px;
  }
  .hamburger-btn {
    width: 50px;
    height: 50px;
  }
  .fixed-sns, .fixed-sns a {
    display: none;
  }
}