@font-face {
  font-family: "PaytoneOne";
  src: url("assets/font/PaytoneOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Molengo";
  src: url("assets/font/Molengo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[data-lang="jp"] {
  display: none;
}

/* ページ全体のフェード */
body {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* フェードイン */
body.page-loaded {
  opacity: 1;
}

/* フェードアウト */
body.page-fade-out {
  opacity: 0;
}

body {
  margin: 0;
  font-family: "Molengo", sans-serif;
  background: #FFEBD1;
  color: #A37A66;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "PaytoneOne", sans-serif;
}

h3 {
  color: #EF7B4F;
}

img {
  max-width: 100%;
  height: auto;
}

/* ====== Header layout ====== */

.site-header {
  background: #FFEBD1;          
  padding: 5px 64px;          
}

/* ロゴ＋ナビを横並びにする箱 */
.header-inner {
  max-width: 1300px;
  margin: 0 auto;               
  display: flex;
  align-items: center;          
  justify-content: space-between;
}

/* ロゴのサイズ調整*/
.logo img {
  height: 150px;                
  width: auto;
}

/* ナビゲーションを横並びに */
.main-nav ul {
  display: flex;
  gap: 56px;                   
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ドロップダウン初期状態：非表示 */
.main-nav .dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 親 li の位置を基準にする */
.main-nav .has-dropdown {
  position: relative;
}

/* ホバーで表示 */
.main-nav .has-dropdown:hover .dropdown-menu {
  display: block;
}

/* 中のリンクを綺麗に */
.main-nav .dropdown-menu li a {
  display: block;
  padding: 8px 20px;
  white-space: nowrap;
  font-size: 14px;
  color: #333;
}

.main-nav .dropdown-menu li a:hover {
  background-color: #f5f5f5;
}

/* ナビのリンクの見た目 */
.main-nav a {
  text-decoration: none;
  color: #A37A66;              
  font-family: "Molengo", sans-serif;
  font-size: 18px;
}

/* ホバーしたときの色　*/
.main-nav a:hover {
  color: #c86a5b;
}

/* 言語切り替えは右上に寄せる */
.language-switcher {
  position: absolute;
  top: 20px;
  right: 32px;
  font-size: 16px;
}

.language-switcher button {
  border: none;
  background: none;
  font-family: "Molengo", sans-serif;
  cursor: pointer;
  color: #8c6f5a;
}

.language-switcher button:hover {
  color: #EAA287;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

main {
  max-width: 1300px;   
  margin: 0 auto;      
  padding: 0 25px;     
}

body {
  text-align: center;
}
/*フッター*/
.site-footer {
  padding: 60px;
}

/* ====== Top Page layout ====== */
.hero-title {
  margin-top: 100px;
  margin-bottom: 60px;
  fontsize: 22px;
}
/*トップページキャラクター*/
.hero-character {
  width: 180px;  
  height: auto;
}

.hero-characters {
  display: flex;
  gap: 20px; 
  justify-content: center;
  padding: 20px 64px;
}

.hero-tagline {
  margin-bottom: 60px;
}

/*My Furry Friends Section*/
.app-inner {
  display: flex;
  align-items: center;     
  justify-content: center; 
  gap: 60px;               
  margin: 30px auto;
  max-width: 1000px;       
}

.app-icon {
  width: 400px; 
  height: auto;
  display: block;
}

.app-title {
  width: 380px;  
  height: auto;
  display: block;
}

.app-content {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  gap: 10px;
  margin-top: 15px;
}

.apple-store-logo {
  width: 160px;  
  height: auto;
  display: block;
}

.app-learnmore {
  margin: 0px auto;
  width: 200px;
}
/*Learn more Hover*/
.btn-primary {
  position: relative;
  display: inline-block;
}

.btn-primary img {
  display: block;
}

/* 最初に表示される画像 */
.btn-primary img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.25s ease;
}

/* ホバー画像　*/
.btn-primary img:last-child {
  opacity: 0; 
  transition: opacity 0.25s ease;
}

/* ホバーしたら反転する */
.btn-primary:hover img:first-child {
  opacity: 0;
}

.btn-primary:hover img:last-child {
  opacity: 1;
}

/*Work Experience*/
.works-title {
  padding-top: 100px;
  padding-bottom: 20px;
}

.works-grid {
  width: 900px;   
  height: auto;
  justify-content: center;
  gap: 20px;
  display: flex;
  margin: 0 auto;
  margin-bottom: 70px;
}

/* ====== about layout ====== */
.about-hero-inner {
  width: 800px;
  height: auto;
  margin: 0 auto;  
}

.about-hero-tagline {
  margin-top: 80px;
}

.value-title {
  margin-top: 100px;
  margin-bottom: 20px;
}

/* 全体を中央寄せ */
.values-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;              
  margin: 40px auto 80px;
}

/* 上の円 */
.value-item-center {
  position: relative;
}

/* 下の２つを横並びにして、上にかぶせる */
.values-bottom-row {
  display: flex;
  gap: 70px;          
  margin-top: -120px;  
}

/* 画像＋テキストを重ねる */
.value-image-wrapper {
  position: relative;
  width: 360px;        
  height: 360px;
}

.value-image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 画像のド真ん中にテキストを配置 */
.value-text-center,
.value-text-left,
.value-text-right {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 10px, 10px;     
}

/* ====== Hairball Friends layout ====== */
.haorballfriends-hero-inner {
  display: flex;
  margin: 0 auto;  
  gap: 40px;
  padding: 0px auto;
  justify-content: center; 
  margin-bottom: 50px;
  align-items: center;
}

.hairball-friends-logo img {
  width: 300px;
  height: auto;
}

.hairball-friends-SnuffyandFriends {
  width: 600px;
  height: auto;
}

.charactors-section img {
  width: 200px;
}

.Muffuffu-container {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 20px 0;
  justify-content: center;
  align-items: center;     
  text-align: left; 
}

.Muffuffu {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.Baffuffu-container {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 20px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.Baffuffu {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align:　left;
}

.Fuffuffu-container {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 20px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.Fuffuffu {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.Moffuffu-container {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 20px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.Moffuffu {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align:　left;
}

.Snuffy-container {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 10px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.Snuffy {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.Snufy-last-paragraph {
  width: 1000px;
  margin: 0 auto;  
  justify-content: center;
}

/* ====== MFF layout ====== */
.mff-header {
  width: 1000px;
  margin: 0 auto; 
  display: flex;
  gap: 50px;
  padding: 40px 0;
  align-items: center;    
  justify-content: center; 
}

.mff-appicon {
  width: 450px; 
  height: auto;
  display: block;
}

.mff-app-content {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 10px;
}

.Mff-app-title img {
  width: 250px;  
  height: auto;
  display: block;
}

.Mff-app-store-logo {
  width: 160px;  
  height: auto;
  display: block;
}

.Why-I-built-this-app {
  width: 1000px;
  margin: 0 auto; 
  display: flex;
  gap: 10px;
  margin-top: 40px;
  align-items: center;    
  justify-content: center; 
}

.Why-I-built-this-app-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.Romeo-photo {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 10px;
}

.Romeo-photo img {
  width: 160px;  
  height: auto;
}

.Snuffy-Meltan-photos img {
  width: 160px;
  height: auto;
}

.The-world-of-MFF {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 40px;                
  padding: 70px 0;
  align-items: center;      
  justify-content: center;  
}

.The-world-of-MFF-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.The-world-of-MFF-text h3 {
  margin-top: 15px;   
  margin-bottom: 8px; 
}

.The-world-of-MFF-text p {
  margin-top: 0px;    
  margin-bottom: 20px; 
  line-height: 1.6;   
}

/* スクリーンショット画像を2枚並列にする */
.MFF-screenshots {
  display: flex;
  flex-direction: row; 
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.MFF-screenshots img {
  width: 170px;
  height: auto;
}

.How-it-was-made {
  width: 900px;
  margin: 0 auto; 
  display: flex;
  padding: 0px 0;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.How-it-was-made h3 {
  margin-top: 15px;  
  margin-bottom: 8px; 
}

.How-it-was-made p {
  margin-top: 0px;    
  margin-bottom: 20px; 
  line-height: 1.6;   
}

.MFF-Thankyou {
  width: 800px;
  margin: 0 auto; 
  display: flex;
  gap: 10px;
  padding: 70px 0;
  align-items: center;    
  justify-content: center; 
}

.MFFpage-last-Muffuffu {
  width: 80px;
  height: auto;
}

/* ====== World layout ====== */
.Minami-image {
  width: 700px;
  height: auto;
  margin: 0 auto;
}

.Minami-text p {
  margin-top: 40px;   
  margin-bottom: 100px; 
}

/* --- 塗り絵全体の親エリア --- */
.Nurie {
  position: relative;
  width: 800px;
  height: 556px;
  margin: 0 auto;
}

/* --- ベース画像 nurie0（常に表示） --- */
.Nurie > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 1;
  opacity: 1;
}

/* --- カラー画像（デフォルト非表示） --- */
.Nurie > div {
  position: absolute;   
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Nurie > div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;               
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* --- JSで visible クラスが付いた時に表示 --- */
.Nurie img.visible {
  opacity: 1;
}

/* ボタン全体のコンテナ */
.Nurie-button {
  width: 1000px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 上段・下段のボタンを中央に並列 */
.Nurie-button-1,
.Nurie-button-2 {
  display: flex;
  justify-content: center;   
  gap: 40px;                 
  flex-wrap: wrap;           
}

/* 各ボタンの基本スタイル */
.Nurie-button-1 h2,
.Nurie-button-2 h2 {
  cursor: pointer;
  font-size: 24px;
  margin: 0;
  transition: opacity 0.3s ease;
}

/* ホバー演出（薄く光る感じ） */
.Nurie-button-1 h2:hover,
.Nurie-button-2 h2:hover {
  opacity: 0.6;
}

/* それぞれ好きな色に変更できる */
.Nurie-button-marketing {
  color: #FD8A7A;   
}

.Nurie-button-Snowboarding {
  color: #A5EBFD;   
}

.Nurie-button-Family_and_Friends {
  color: #FDDF27;
}

.Nurie-button-Animals {
  color: #A9906B;
}

.Nurie-button-Life_in_Canada {
  color: #44423E;
}

.Nurie-button-Games {
  color: #E4DDD4;
}

.Nurie-button-Violin_and_Bass_Guitar {
  color: #CBA04A;
}

.Nurie-button-Badminton {
  color: #684029;
}

.What_makes_this_world_last_paragraph p {
  margin-top: 80px;
  margin-bottom: 20px;
}

/*FAQ and Privacy Policy*/
.mff-privacypolicy h1,
.mff-helpandsupport h1 {
  margin-top: 100px;
  margin-bottom: 100px;
  fontsize: 30px;
}

.mff-helpandsupport,
.mff-privacypolicy {
  width: 900px;
  margin: 0 auto; 
  display: flex;
  padding: 0px 0;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align: left;
}

.mff-helpandsupport h2,
.mff-privacypolicy h2 {
  margin-top: 35px;  
  margin-bottom: 5px; 
}

.mff-helpandsupport h4,
.mff-privacypolicy h4 {
  margin-top: 7px;  
  margin-bottom: 5px; 
}

/*Mff lp*/

/* story.html だけ背景模様を表示する */
body.story-page {
  background:
    url("assets/img/paw.png") repeat-y left top,
    url("assets/img/paw.png") repeat-y right top;
  background-size: 380px auto;
  background-color: #FFEBD1;
}

/* ヒーロー全体の器 */
.mfflp-hero {
  width: 100%;
}

/* 中身を中央寄せ＋相対位置の基準にする */
.mfflp-hero-inner {
  position: relative;
  max-width: 1200px;   /* 必要に応じて調整 */
  margin: 0 auto;
}

/* 背景画像：横幅いっぱい、高さはauto */
.mfflp-hero-bg-img {
  width: 100%;
  height: auto;
  display: block;
}

/* タイトル画像：背景の上に重ねて右上寄せ */
.mfflp-hero-title-img {
  position: absolute;
  top: 3%;        /* ここは好みで微調整 */
  right: 5%;       /* 同じく微調整ポイント */
  width: 500px;    /* 大きさも好みで調整 */
  height: auto;
  z-index: 2;
}

/* アイコン＋ストアロゴのコンテナ（タイトルの真下あたり） */
.mfflp-hero-app {
  position: absolute;
  right: 15%;       /* タイトルと右端をそろえる */
  top: 40%;        /* タイトルの下に来るように調整 */
  display: flex;
  align-items: center;  /* アイコンとロゴの“縦の中心”を揃える */
  gap: 16px;            /* アイコンとロゴの間隔 */
  z-index: 2;
}

/* アプリアイコン */
.mfflp-hero-icon {
  width: 120px;
  height: auto;
  display: block;
}

/* App Store ロゴ */
.mfflp-hero-store-link img {
  width: 150px;
  height: auto;
  display: block;
}

.mfflp-tagline img {
  width: 900px;
  height: auto;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 10px;
}

.mfflp-muffuffu-image img {
  width: 150px;
}

.mfflp-features {
  width: 900px;
  margin: 0 auto;
}

.mfflp-features h2 {
  margin-top: 100px;
  margin-bottom: 50px;
}

.mfflp-perfectfor {
  width: 1000px;  
  margin: 0 auto;  
  display: flex;
  gap: 80px;
  padding: 0px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.mfflp-perfectfor-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start; 
  justify-content: center;
  text-align:　left;
}

.mfflp-snuffy-sleeping img {
  width: 350px;
}

.mfflp-keyfeatures {
  width: 900px;  
  margin: 0 auto;  
  display: flex;
  gap: 60px;
  padding: 30px 0;
  justify-content: center;
  align-items: center;     
  text-align: left;
}

.mfflp-keyfeatures-image {
  width: 250px;
  height: auto;
}
  
.mfflp-keayfeatures-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: center;
  text-align:　left;
}

.mfflp-values p { 
  margin: 0 auto;  
  margin-top: 20px;
  margin-bottom: 10px;
}

.snuffyandmuffuffu-image {
  width: 350px;
  height: auto;
  margin: 0 auto;
  padding: 40px 0;
}

/*work*/
.Marketing-hero img {
  width: 900px;
  height: auto;
}

.work-buttons {
  width: 500px;   
  height: auto;
  justify-content: center;
  gap: 20px;
  display: flex;
  margin: 0 auto;
  margin-bottom: 60px;
  margin-top: 30px;
}

.Marketing-hero-tagline {
  width: 900px;
  height: auto;
  margin: 0 auto;
}

..Marketing-hero-tagline p {
  margin-bottom: 60px;
}

.marketing-examples {
  padding: 30px 0;
}

.marketing-sub {
  width: 900px;
  margin: 0 auto;      
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  text-align: left;
}

.marketing-sub h2 {
  margin-top: 15px;   
  margin-bottom: 8px; 
}

.marketing-sub p {
  margin-top: 0px;    
  margin-bottom: 20px; 
  line-height: 1.6;   
}

.marketing-images img {
  width: 650px;
  height: auto;
  margin-bottom: 30px;
}

.creative-hero {
  width: 100vw;          /* 画面幅いっぱい */
  height: 400px;         /* ← 縦サイズを固定（好きな高さに） */
  overflow: hidden;      /* はみ出した部分を切る */
  position: relative;

  /* サイト全体の左右余白を無視するため */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.creative-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ここが肝：見切れてOKで全面表示 */
  object-position: center; /* 中央基準でトリミング */
  display: block;
}

.creative-images2 {
  display: flex;
  margin: 0 auto;  
  gap: 60px;
  padding: 0px auto;
  justify-content: center; 
  margin-bottom: 50px;
  align-items: center;
}

.creative-images2 img {
  width: 300px;
  height: suto;
}

.creative-images3 {
  width: 900px;
  display: flex;
  margin: 0 auto;  
  gap: 15px;
  justify-content: center; 
  margin-bottom: 50px;
  align-items: center;
}

.creative-images3 img {
  width: 170px;
  height: auto;
}



  

/* スマホ */
/* =========================
   スマホ用レイアウト
   ========================= */
/*ハンバーガー*/
/* PCでは非表示 */
.hamburger,
.mobile-nav {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
    position: absolute;
    top: 22px;
    right: 20px;
    width: 28px;
    cursor: pointer;
    z-index: 2000;
  }

  .hamburger span {
    display: block;
    height: 2px;
    background: #A37A66;
    margin: 6px 0;
    border-radius: 2px;
  }
  
  .mobile-nav a.active {
  color: #A37A66;
  }

  .mobile-nav-parent > a {
    font-weight: 600;
  }

  /* サブメニュー */
  .mobile-sub-nav {
    list-style: none;
    padding-left: 16px;
    margin-top: 8px;
  }

  .mobile-sub-nav li {
    margin: 6px 0;
  }

  .mobile-sub-nav a {
    font-size: 12px;
    color: #A37A66;
    opacity: 0.85;
  }
  
  /* PCメニューは非表示 */
  .main-nav {
    display: none;
  }
   /* PC　言語切り替えは非表示 */　
 .language-switcher {
    display: none;
  }
  .language-switcher button {
    display: none;
  }
  .language-switcher span {
    display: none;
  }
  

  /* モバイルメニュー初期状態（画面外） */
  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    background: #FFEBD1;
    padding: 60px 25px;
    transition: right 0.3s ease;
    z-index: 1500;
    box-shadow: -4px 0 12px rgba(0,0,0,0.08);
  }

  .mobile-nav.active {
    right: 0;
  }

  .mobile-nav ul {
    list-style: none;
    padding: 0;
  }

  .mobile-nav li {
    margin: 20px 0;
  }

  .mobile-nav a {
    font-size: 20px;
    color: #444;
    text-decoration: none;
  }

  .mobile-lang {
    margin-top: 30px;
    font-size: 18px;
  }

  .mobile-lang button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
  }
}
/*スマホ*/
@media (max-width: 768px) {

  body {
    padding: 0 15px;
  }

  /* 全体の横幅を画面にフィットさせる */
  main,
  .The-world-of-MFF,
  .Why-I-built-this-app,
  .How-it-was-made,
  .values-grid,
  .Moffuffu-container 
  .mfflp-features 
  .mfflp-perfectfor {
    width: 100%;
    max-width: 100%;
  }

  
  
  /* ヒーロー（タイトル＋キャラたち） */
  .hero-inner {
    text-align: center;
    padding: 20px 0;
  }

  .hero-characters {
    gap: 8px;
  }

  .hero-character {
    width: 70px;   /* スマホ用にさらに小さく */
  }

  .app-icon {
    width: 150px;
  }

  .app-title {
    width: 150px;
  }

  .app-store-logo {
    width: 100px;
  }

  .app-content {
    align-items: center;
    text-align: center;
  }

   .hero-characters {
    gap: 8px;
  }
  
  .works-grid img {
    width: 70px;
  }

  .works-grid {
    width: 300px;
  }

  
  .about-hero-inner {
    width: 300px;
    margin: 0 auto;
  }
  
  .values-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 20px;
  }

  /* 画像は全て縦並びに */
  .value-item-center,
  .value-item-left,
  .value-item-right {
    margin-top: -30px;   /* ← 上の画像とかぶせる */
  }

  /* 一番上だけは margin をリセットしておく */
  .value-item-center {
    margin-top: 0;
  }

  /* 画像サイズをスマホ用に縮小 */
  .value-image-wrapper {
    width: 260px;
    height: 260px;
  }

  /* テキストは画像の真ん中にそのまま配置 */
  .value-text-center,
  .value-text-left,
  .value-text-right {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
  }
  .value-text-center h2 {
    font-size: 20px;
  }
  .value-text-center p {
    font-size: 12px;
  }
   .value-text-left h2 {
    font-size: 20px;
  }
  .value-text-left p {
    font-size: 12px;
  }
   .value-text-right h2 {
    font-size: 20px;
  }
  .value-text-right p {
    font-size: 12px;
  }
  

  /* 下２つを横並びにしないための解除 */
  .values-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0; /* これがあると歪むのでリセット */
  }

  /*Hairball friends SP*/
  .hairball-friends-logo {
  width: 120px;
  margin: 0 auto;
  }
  .haorballfriends-hero-inner {
    gap: 2px;
  }
  
  .hairball-friends-SnuffyandFriends {
    width: 150px;
    margin: 0 auto;
  }
  .Muffuffu-container,
  .Baffuffu-container,
  .Fuffuffu-container,
  .Moffuffu-container,
  .Snuffy-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 25px;   /* 下に少し余白 */
    padding: 16px 24px;
    display: flex;
    flex-direction: column;   /* ← 横→縦 に変更 */
    gap: 16px;
    align-items: center;      /* 画像＋テキストを中央寄せ */
    text-align: center;
  }

  /* テキスト側も中央寄せに */
  .Muffuffu,
  .Baffuffu,
  .Fuffuffu,
  .Moffuffu,
  .Snuffy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* 画像サイズも少し小さめにするとき */
  .Muffuffu-container img,
  .Baffuffu-container img,
  .Fuffuffu-container img,
  .Moffuffu-container img,
  .Snuffy-container img {
    width: 180px;
    height: auto;
  }

  /* Snuffyの最後の段落も幅をスマホ寄りに */
  .Snufy-last-paragraph {
    width: 100%;
    padding: 0 24px 40px;
    text-align: center;
  }


  /*MFF SP*/
  .mff-appicon {
    width: 130px;
  }

  .Mff-app-title {
    width: 130px;
  }

  .MFF-app-store-link {
    width: 110px;
  }

  .MFF-Thankyou {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;   /* ← 横から縦へ変更 */
    gap: 20px;
    align-items: center;      /* 中央寄せ */
    text-align: center;       /* テキスト中央揃え */
  }

  .MFFpage-last-Muffuffu {
    width: 120px;   /* 画像をスマホ向けに少し大きめに */
    height: auto;
  }
  
  .mff-header {
    width: 300px;
  }

  /*World SP*/
  .Minami-image {
    width: 250px;
    margin: 0 auto;
  }

  /* MFF テキスト＋スクショの並び  縦積み */
  .The-world-of-MFF {
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
  }

  .MFF-screenshots {
    flex-direction: row;
    gap: 12px;
    justify-content: center;
  }

  .MFF-screenshots img {
    width: 130px;
  }

  /* Why I built this app 縦積み */
  .Why-I-built-this-app {
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
  }

  .Why-I-built-this-app-text {
    width: 100%;
  }

  .Snuffy-Meltan-photos img,
  .Romeo-photo img {
    width: 180px;
  }

  .Romeo-photo {
    padding: 0;
  }

  /* 塗り絵エリアもスマホ幅に合わせる */
 .Nurie {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .Nurie > img,
  .Nurie > div img {
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ボタンコンテナを画面幅に合わせて下に配置 */
  .Nurie-button {
    width: 100%;
    margin: 24px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 275px;
  }

  /* 上段／下段どちらも「縦並び＋中央揃え」に変更 */
  .Nurie-button-1,
  .Nurie-button-2 {
    display: flex;
    flex-direction: column;   /* ← 横並び → 縦並び */
    align-items: center;      /* 中央寄せ */
    justify-content: center;
    gap: 8px;
  }

  /* ボタンの文字サイズも少しだけ小さく */
  .Nurie-button-1 h2,
  .Nurie-button-2 h2 {
    font-size: 18px;
    text-align: center;
  }
  .Colours-of-This-World p {
    margin-bottom: 140px;
  }

  /*FAQ and Privacy*/
  .mff-helpandsupport,
  .mff-privacypolicy {
    width: 100%;
    max-width: 100%;
    padding:0 15px;
  }

  /* MFF LP*/
  /*Background*/
   body.story-page {
  background:none;
  background-color: #FFEBD1;
}
  /*重ね解除*/
  .mfflp-hero-app {
    position: static;      /* 重ねるのをやめてフローに戻す */
    margin: 16px auto 0;
    display: block;
    text-align: center;
  }

  .mfflp-hero-app {
    display: flex;
    justify-content: center;
  }
  
  .mfflp-keyfeatures,
  .mfflp-perfectfor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0;
    width: 380px; /* これがあると歪むのでリセット */
  }
  
  .mfflp-hero-title-img {
    position: absolute;
    top: 2%;        /* ここは好みで微調整 */
    margin: 0 auto;    /* 同じく微調整ポイント */
    width: 200px;    /* 大きさも好みで調整 */
    height: auto;
  }
  .mfflp-muffuffu-image img {
    width: 150px;
    height: auto;
  }
  .mfflp-features h2,
  .mfflp-features h3,
  .mfflp-features p {
    width: 350px;
  }
  .mfflp-values p {
    width: 350px;
  }
  .mfflp-values,
  .mfflp-features {
    width: 350px;
  }

  .mfflp-features h2 {
    margin-top: 50px;
    margin-bottom: 25px;
  }
  .mfflp-keyfeatures {
    padding: 15px 0;
  }

  body.story-page.pageloaded {
    padding: 0 0;
  }

  /*スマホでは非公開*/
  .works-section {
  display: none;
}
  
}