@charset "UTF-8";
/* iPad Responsive Styles */


/* PC/SPの表示切り替え制御 - iPadはスマホベース */
@media (min-width: 761px) and (max-width: 1024px) {
  .display_pc {
    display: none !important;
  }
  .display_sp {
    display: block !important;
  }
  .display-flex.display_sp {
    display: flex !important;
  }
  .about_bg.display_sp {
    display: block !important;
  }
  
  /* ロゴ画像をPC版（LOGO_yoko2.png）に変更 - 601px以上全て対応 */
  .header-sp_logo img {
    content: url("../images/top/LOGO_yoko2.png") !important;
    width: 380px !important; /* PC表示と同じサイズ */
    height: auto !important;
    object-fit: contain !important;
    margin-left: 40px !important;
    margin-top: 10px !important; /* PC表示と同じ */
  }
  
  /* ハンバーガーメニューをロゴ中央に配置 */
  .header-sp_logo {
    display: flex !important;
    align-items: center !important;
    height: 100px !important; /* PC headerと同じ高さ */
  }
  
  /* ハンバーガーメニューボタンの位置調整 */
  .z-index {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    top: 0 !important;
    right: 10px !important;
  }
  
  /* ヘッダーコンテナの高さをPCと同じに */
  #header-container {
    height: 100px !important;
  }
  
  /* 最強セレクタで確実に幅制限解除 */
  /* html body #works-container {
    max-width: none !important;
    width: 100% !important;
    margin: 200px 0 0 0 !important;
  } */
  
  html body .image-item.large {
    width: 100% !important;
    max-width: none !important;
  }
}

/* タブレット・小型デスクトップ (760px - 1100px) - iPadベース完全適用（iPad Mini対応） */
@media (min-width: 760px) and (max-width: 1100px) {
  /* member-container内のinnerとmember-topの調整 */
  html body #member-container .inner {
    margin-top: 40px !important;
  }

  html body #member-container .member-top {
    margin-top: 0 !important;
  }
  /* PC/SPの表示切り替え制御 - PC版スタイルに合わせる */
  .display_pc {
    display: block !important;
  }
  .display_sp {
    display: none !important;
  }
  .display-flex.display_sp {
    display: none !important;
  }
  .about_bg.display_sp {
    display: none !important;
  }
  
  /* 最強セレクタで確実に幅制限解除 - iPadと同じ */
  html body #works-container {
    max-width: none !important;
    width: calc(100% - 40px) !important;
    margin: 60px 20px 0 20px !important; /* ヘッダー高さ変更に合わせて調整 */
  }
  
  html body .image-item.large {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Container幅の修正 - iPadと同じ */
  #container {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Inner要素の幅制限を解除 - iPadと同じ */
  .inner {
    max-width: none !important;
    width: 100% !important;
  }
  
  /* ヘッダーメニューの幅制限を解除 - iPadと同じ */
  .header-menu {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Works containerの幅制限を解除 - iPadと同じ */
  html body #works-container {
    max-width: none !important;
    width: calc(100% - 40px) !important;
    margin: 60px 20px 0 20px !important; /* ヘッダー高さ変更に合わせて調整 */
  }
  
  html body #works-container .inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* image-item.largeの幅制限も解除 - iPadと同じ */
  html body .image-item.large {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 20px 0 !important;
  }
  
  /* About sectionの幅調整 - iPadと同じ */
  .about-text {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* その他の要素の幅制限解除 - iPadと同じ */
  html body .curved-section {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* ヘッダー調整 - iPadと同じ */
  #header {
    display: none !important;
  }
  
  #header-sp {
    display: block !important;
    margin: 0 10px !important;
  }
  
  .header-sp_logo img {
    width: 380px !important; /* PC表示と同じサイズ */
    height: auto !important;
    object-fit: contain !important;
    margin-left: 40px !important;
    margin-top: 10px !important;
  }
  
  /* ロゴ画像をPC版（LOGO_yoko2.png）に変更 */
  .header-sp_logo img {
    content: url("../images/top/LOGO_yoko2.png") !important;
  }
  
  /* ハンバーガーメニューをロゴ中央に配置 */
  .header-sp_logo {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    padding: 0 10px !important;
  }
  
  /* ハンバーガーメニューボタンの位置調整 */
  .z-index {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    top: 0 !important;
    right: 10px !important;
  }
  
  /* ヘッダーコンテナの高さをPCと同じに */
  #header-container {
    height: 100px !important;
  }
  
  /* ハンバーガーメニューのサイズ調整 - iPadベース */
  .openbtn {
    width: 45px;
    height: 50px;
  }
  
  .openbtn span {
    width: 32px;
    height: 3px;
    left: 7px;
    border-radius: 2px;
  }
  
  /* ハンバーガーメニューの初期位置調整 - iPadと同じ */
  .openbtn span:nth-of-type(1) {
    top: 14px;
  }
  
  .openbtn span:nth-of-type(2) {
    top: 22px;
  }
  
  .openbtn span:nth-of-type(3) {
    top: 30px;
  }
  
  /* ×ボタンの状態調整 - iPadと同じ */
  .openbtn.active span:nth-of-type(1) {
    top: 22px !important;
    left: 5px !important;
    transform: translateY(0px) rotate(-45deg) !important;
    width: 70% !important;
  }
  
  .openbtn.active span:nth-of-type(2) {
    opacity: 0 !important;
  }
  
  .openbtn.active span:nth-of-type(3) {
    top: 22px !important;
    left: 5px !important;
    transform: translateY(0px) rotate(45deg) !important;
    width: 70% !important;
  }
  
  /* ナビゲーションメニューの調整 - iPadと同じ */
  .nav {
    /* padding: 40px 30px; */
    /* 初期状態で非表示を確実にする */
    left: 100% !important;
  }
  
  /* ナビゲーション内のcurved-sectionの高さ調整 */
  #header-sp .curved-section {
    min-height: 100vh !important; /* 80vhから100vhに変更 */
  }
  
  /* ナビゲーション内のHATCH-kunのみ特別設定 */
  .nav .HATCH-kun {
    width: 700px !important;
    bottom: 0px !important;
    right: -40px !important;
  }
  
  /* openクラスが付いた時のみ表示 */
  .open .nav {
    left: 0 !important;
  }
  
  .nav ul li {
    /* font-size: 2.0rem; */
    margin-bottom: 30px;
  }
  
  .nav_logo {
    max-width: 250px;
  }
  
  .HATCH-kun {
    width: 150px;
    bottom: 40px;
    right: 40px;
  }
  
  /* Works Container - SP版スタイルを適用 */
  body #works-container {
    margin: 60px auto 50px 0 !important;
    padding: 0 30px !important;
  }
  
  body #works-container .inner {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body #works-container .large,
  body .image-item.large {
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/9 !important;
  }
  
  /* Works - Small images のスマホ表示に合わせる */
  .display-flex.right {
    gap: 15px !important;
    margin-bottom: 15px !important;
  }
  
  .display-flex.right .display-flex {
    display: block !important;
  }
  
  /* Works Container - Small images の詳細修正 */
  .display-flex.right > li {
    flex: 1 !important;
    min-width: 45% !important;
  }
  
  #works-container .small {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  
  /* Image borders and styling - works_001.htmlでは角丸なし */
  
  #works-container .label {
    font-size: 2.0rem;
    margin-bottom: 10px;
  }
  
  #works-container .tags {
    gap: 8px !important;
    margin: 0 0 2px auto !important;
  }
  
  .display-flex.right .tags {
    gap: 8px !important;
    margin: 0 0 0 auto !important;
  }
  
  #works-container .tag {
    font-size: 1.2rem !important;
    padding: 8px 15px !important;
    margin-right: 0 !important;
    margin-left: 6px !important;
    line-height: 1.2rem !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* New badge - iPad用サイズ調整 */
  .new-badge {
    top: -45px !important;
    right: -20px !important;
  }
  
  .new-badge img {
    width: 70px !important;
  }
  
  /* About Container - PC版スタイルを適用 */
  .star {
    position: relative !important;
    margin-bottom: 30px !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 550px !important;
  }
  
  .star img {
    display: block !important;
    width: 100% !important;
    max-width: 765px !important;
    margin: 40px auto 0 !important;
  }
  
  .about-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 800px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  .about-text img {
    width: 800px !important;
    margin: 0 auto 30px !important;
  }
  
  .text-box {
    margin: 30px 0 !important;
  }
  
  .text-box p {
    font-size: 1.6rem !important;
    line-height: 5.8rem !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  /* About logo をウィンドウ幅に合わせてフレキシブルに調整 */
  .about-text img.display_pc {
    /* width: 80% !important; */
    max-width: 800px !important;
    height: auto !important;
    margin: 0 auto 40px !important;
  }
  
  /* Underlineの調整 - iPadと同じ */
  .underline::after {
    bottom: 20px !important;
    height: 4px !important;
  }
  
  /* Member Container - PC版スタイルを適用 */
  html body #member-container {
    background-color: #fff !important;
    padding: 60px 0 80px !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    width: calc(100% - 100px) !important;
    border-radius: 20px !important;
  }
  
  #member-container h2 {
    margin: 0 auto 50px !important;
    font-size: 3.2rem !important;
    letter-spacing: 2px !important;
  }
  
  #member-container .display-flex {
    justify-content: center !important;
  }
  
  /* Contact Container - PC版スタイル完全準拠 */
  #contact-container {
    margin: 0 auto 60px 50px !important;
    text-align: left !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: none !important;
  }
  
  #contact-container img {
    display: block !important;
  }
  
  /* コンタクトロゴサイズ - PC版と同じ */
  #contact-container > div:first-child img {
    width: 250px !important;
  }
  
  .contact-link {
    width: 400px !important;
    border-bottom: 2px solid #4a2d04 !important;
    margin: 60px 0 0 !important;
    justify-content: space-between !important;
    display: flex !important;
  }
  
  .contact-link p {
    font-size: 2rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
  }
  
  .contact-link img {
    padding: 0 5px 0 0 !important;
    width: 30px !important;
  }
  
  /* メールアイコンサイズ - PC版と同じ */
  #contact-container .contact-link img {
    width: 30px !important;
    height: auto !important;
  }
  
  .contact-link:hover img.contact-icon {
    opacity: 0 !important;
  }
  
  .contact-link:hover::after {
    background-image: url("assets/images/top/icon_mail_yellow.png") !important;
    opacity: 1 !important;
  }
  
  #contact-container a {
    color: #4a2d04 !important;
    display: inline-block !important;
  }
  
  /* Footer - PC版スタイル完全準拠 */
  .footer {
    position: relative !important;
    z-index: 1 !important;
  }
  
  .footer-banner {
    position: relative !important;
    width: 500px !important;
    height: 180px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin-left: 20px !important;
    z-index: 2 !important;
  }
  
  .footer-banner img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.7) contrast(1.1) !important;
    transition: transform 0.3s ease-in-out !important;
    transform-origin: center !important;
  }
  
  .footer-banner_inner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .footer-banner_inner .logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 300px !important;
    height: auto !important;
  }
  
  .footer-banner_inner .button {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 30px !important;
    height: auto !important;
  }
  
  /* HATCH-kun - サイズを20%大きく、上に100px移動 */
  .HATCH-kun {
    width: 432px !important; /* 360pxの120% */
    bottom: -100px !important; /* -200px + 100px = -100px */
    right: -40px !important; /* 60px - 100px = -40px */
  }
  
  /* Footer Policy - PC版スタイル完全準拠 */
  .footer-policy_pc {
    display: flex !important;
    justify-content: right !important;
    margin: 60px 40px 20px auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .footer-policy_sp {
    display: none !important;
  }
  
  .footer-policy p {
    margin: 0 40px !important;
    font-size: 1.2rem !important;
    letter-spacing: 2px !important;
  }
  
  .footer-policy a {
    color: #4a2d04 !important;
    border-bottom: none !important;
  }
  
  .footer-policy .policy {
    margin-bottom: 20px !important;
  }
  
  .footer-policy .policy p {
    display: inline-block !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    line-height: 1.0 !important;
    border-bottom: 1px solid #4a2d04 !important;
  }
  
  /* Curved Section - iPadと同じ */
  html body .curved-section {
    padding: 50px 0px 0 0px !important;
    border-top-left-radius: 120% 80px !important;
    border-top-right-radius: 120% 80px !important;
    margin-top: 0 !important;
  }
  
  /* Egg section親要素の制約を解除 */
  .egg .display_pc {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Egg section - 8個表示 */
  #egg-pc {
    display: flex !important;
    justify-content: center !important;
    gap: 9px !important; /* 15pxの60%に調整 */
    margin: 20px 0 !important;
    padding: 0 !important; /* 左右パディングを0に */
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  
  #egg-pc .egg-item {
    /* min-width: 80px !important; */
    max-width: 120px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  
  #egg-pc .egg-item:nth-child(n+9) {
    display: none !important;
  }
  
  #egg-sp {
    display: none !important;
  }
  
  .egg .display-flex {
    justify-content: center !important;
  }
  
  /* テキスト改行とフォント調整 - iPadと同じ */
  .label {
    margin-left: 0 !important;
    font-size: 1.6rem !important;
    text-align: left !important;
    line-height: 2.4rem !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  
  .display-flex.right .label {
    margin-left: 0 !important;
    font-size: 1.4rem !important;
  }
  
  /* ロゴサイズはPC版と同じ380pxに統一済み */
  
  .z-index {
    padding: 0 10px 0 0 !important;
  }
  
  .top {
    margin: 0 35px 0 auto !important;
  }
}

/* iPad縦向き (761px - 880px) - スマホベース調整 */
@media (min-width: 761px) and (max-width: 880px) {
  /* Container幅の修正 - 画面幅いっぱいに */
  #container {
    width: 100% !important;
    max-width: none !important;
  }

  /* Inner要素の幅制限を解除 */
  .inner {
    max-width: none !important;
    width: 100% !important;
  }

  /* ヘッダーメニューの幅制限を解除 */
  .header-menu {
    width: 100% !important;
    max-width: none !important;
  }

  /* Works containerの幅制限を解除 - より具体的なセレクタ */
  body #works-container {
    max-width: none !important;
    width: 100% !important;
    margin: 200px 0 0 0 !important; /* ヘッダー高さ変更に合わせて調整 */
  }

  body #works-container .inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* image-item.largeの幅制限も解除 */
  body .image-item.large {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 20px 0 !important;
  }

  /* About sectionの幅調整 */
  .about-text {
    width: 100% !important;
    max-width: none !important;
  }

  /* その他の要素の幅制限解除 */
  .curved-section {
    width: 100% !important;
    max-width: none !important;
  }
  /* ヘッダー調整 - スマホヘッダーを使用 */
  #header {
    display: none !important;
  }

  #header-sp {
    display: block !important;
    margin: 0 10px !important;
  }

  .header-sp_logo img {
    width: 380px !important; /* PC表示と同じサイズ */
    height: auto !important;
    object-fit: contain !important;
    margin-left: 40px !important;
    margin-top: 10px !important;
  }

  /* ロゴ画像をPC版（LOGO_yoko2.png）に変更 */
  .header-sp_logo img {
    content: url("../images/top/LOGO_yoko2.png") !important;
  }

  /* ハンバーガーメニューをロゴ中央に配置 */
  .header-sp_logo {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    padding: 0 10px !important;
  }

  /* ハンバーガーメニューボタンの位置調整 */
  .z-index {
    display: flex !important;
    align-items: center !important;
    height: 100px !important;
    top: 0 !important;
    right: 10px !important;
  }

  /* ヘッダーコンテナの高さをPCと同じに */
  #header-container {
    height: 100px !important;
  }

  /* ハンバーガーメニューのサイズ調整 - 1100px版と同じスタイル維持 */
  .openbtn {
    width: 45px;
    height: 50px;
  }

  .openbtn span {
    width: 32px;
    height: 3px;
    left: 7px;
    border-radius: 2px;
  }

  /* ハンバーガーメニューの初期位置調整 - 1100px版と同じ */
  .openbtn span:nth-of-type(1) {
    top: 14px; /* 1100px版と同じ14px */
  }

  .openbtn span:nth-of-type(2) {
    top: 22px;
  }

  .openbtn span:nth-of-type(3) {
    top: 30px; /* 1100px版と同じ30px */
  }

  /* ×ボタンの状態調整 - 1100px版と同じ */
  .openbtn.active span:nth-of-type(1) {
    top: 22px !important;
    left: 5px !important;
    transform: translateY(0px) rotate(-45deg) !important;
    width: 70% !important;
  }

  .openbtn.active span:nth-of-type(2) {
    opacity: 0 !important;
  }

  .openbtn.active span:nth-of-type(3) {
    top: 22px !important;
    left: 5px !important;
    transform: translateY(0px) rotate(45deg) !important;
    width: 70% !important;
  }

  /* ナビゲーションメニューの調整 */
  .nav {
    /* padding: 40px 30px; */
    /* 初期状態で非表示を確実にする */
    left: 100% !important;
  }

  /* ナビゲーション内のHATCH-kunのみ特別設定 - 880以下 */
  .nav .HATCH-kun {
    width: 500px !important;
    bottom: 0px !important;
    right: -40px !important;
  }

  /* openクラスが付いた時のみ表示 */
  .open .nav {
    left: 0 !important;
  }

  /* .nav ul li {
    font-size: 2.0rem;
    margin-bottom: 30px;
  } */

  .nav_logo {
    max-width: 250px;
  }

  .HATCH-kun {
    width: 150px;
    bottom: 40px;
    right: 40px;
  }

  /* Works Container - SP版スタイルを適用 */
  body #works-container {
    margin: 60px auto 50px 0 !important;
    /* padding: 0 30px !important; */
  }

  body #works-container .inner {
    padding: 0 !important;
    margin: 0 !important;
  }

  body #works-container .large,
  body .image-item.large {
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/9 !important;
  }

  /* Works - Small images のスマホ表示に合わせる */
  .display-flex.right {
    gap: 15px !important;
    margin-bottom: 15px !important;
  }

  .display-flex.right .display-flex {
    display: block !important;
  }

  /* Works Container - Small images の詳細修正 */
  .display-flex.right > li {
    flex: 1 !important;
    min-width: 45% !important;
  }

  #works-container .small {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }

  /* Image borders and styling - works_001.htmlでは角丸なし */

  #works-container .label {
    font-size: 2.0rem;
    margin-bottom: 10px;
  }

  #works-container .tags {
    gap: 8px !important;
    margin: 0 0 2px auto !important;
  }

  .display-flex.right .tags {
    gap: 8px !important;
    margin: 0 0 0 auto !important;
  }

  #works-container .tag {
    font-size: 1.2rem !important;
    padding: 8px 15px !important;
    margin-right: 0 !important;
    margin-left: 6px !important;
    line-height: 1.2rem !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* New badge - iPad用サイズ調整 */
  .new-badge {
    top: -45px !important;
    right: -20px !important;
  }

  .new-badge img {
    width: 70px !important;
  }

  /* About Container - PC版スタイルを適用 */
  .star {
    position: relative !important;
    margin-bottom: 30px !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 550px !important;
  }

  .star img {
    display: block !important;
    width: 100% !important;
    max-width: 765px !important;
    margin: 40px auto 0 !important;
  }

  .about-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 800px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .about-text img {
    width: 800px !important;
    margin: 0 auto 30px !important;
  }

  .text-box {
    margin-left: 30px !important; /* スマホと同じ30px */
    margin-top: 20px !important; /* 上部に適切なスペース */
  }

  .text-box p {
    font-size: 1.2rem !important; /* スマホと同じ1.2rem */
    line-height: 3.0rem !important;
    margin: 0 !important;
    text-align: left !important;
  }


  /* About背景の調整 - スマホと同様 */
  .star {
    position: relative !important;
  }

  /* star imgは about_bg と同じ設定を使う（重複回避） */

  /* Underlineの調整 - スマホと同様 */
  .underline::after {
    bottom: 8px !important; /* スマホと同じ */
    height: 4px !important; /* スマホと同じ */
  }

  /* Member Container - PC版スタイルを適用 */
  html body #member-container {
    background-color: #fff !important;
    padding: 60px 0 80px !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    width: calc(100% - 100px) !important;
    border-radius: 20px !important;
  }
  
  #member-container h2 {
    margin: 0 auto 50px !important;
    font-size: 3.2rem !important;
    letter-spacing: 2px !important;
  }
  
  
  #member-container .display-flex {
    justify-content: center !important;
  }
  
  /* Contact Container - スマホベーススタイル完全適用 */
  /* #contact-container {
    margin: 0 40px !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  } */
  
  html body #contact-container img {
    display: block !important;
  }
  
  html body .contact-link {
    width: 400px !important;
    border-bottom: 2px solid #4a2d04 !important;
    margin: 60px 0 0 !important;
    justify-content: space-between !important;
    display: flex !important;
  }
  
  html body .contact-link p {
    font-size: 2rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
  }
  
  html body .contact-link img {
    padding: 0 5px 0 0 !important;
  }

  html body #contact-container a {
    color: #4a2d04 !important;
    display: inline-block !important;
  }
  
  /* Footer - スマホベーススタイル適用 */
  .footer {
    margin: 30px 40px 30px !important;
  }
  
  .footer-banner {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    border-radius: 10px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }
  
  .footer-banner .logo {
    width: 160px !important;
    max-width: 160px !important;
  }
  
  /* .footer-banner .button {
    width: 20px !important;
    height: 20px !important;
  } */
  
  /* .HATCH-kun {
    bottom: 0px !important;
    right: -150px !important;
    width: 350px !important;
  } */
  
  /* Footer Policy - スマホベース */
  .footer-policy {
    text-align: left !important;
    margin-bottom: 40px !important;
  }
  
  /* .footer-policy p {
    display: inline-block !important;
    margin: 0 auto 0 0 !important;
    font-size: 1.2rem !important;
  } */
  
  .footer-policy .policy {
    margin-bottom: 20px !important;
  }
  
  .footer-policy .policy p {
    display: inline-block !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    line-height: 1.0 !important;
    border-bottom: 1px solid #4a2d04 !important;
  }
  
  /* Curved Section */
  .curved-section {
    padding: 40px 10px !important;
    border-top-left-radius: 120% 80px !important;
    border-top-right-radius: 120% 80px !important;
    margin-top: 0 !important;
  }
  
  /* Egg Animation - スマホサイズベース */
  .egg .display_sp {
    width: 100% !important;
    margin: 0 !important;
    padding: 15px 0 !important;
  }
  
  .egg .display_sp img {
    width: calc(18% - 3.4vw) !important;
    margin: 0 1.7vw !important;
    padding: 0 !important;
  }
  
  .egg .display-flex {
    justify-content: center !important;
  }
  
  /* テキスト改行とフォント調整 */
  .label {
    margin-left: 0 !important;
    font-size: 1.6rem !important;
    text-align: left !important;
    line-height: 2.4rem !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  
  .display-flex.right .label {
    margin-left: 0 !important;
    font-size: 1.4rem !important;
  }
  
  /* ロゴサイズはPC版と同じ380pxに統一済み */
  
  .z-index {
    padding: 0 10px 0 0 !important;
  }
  
  .top {
    margin: 0 35px 0 auto !important;
  }
  
  /* About セクションのテキストスタイルを1100px版と同じに維持 */
  .text-box p {
    font-size: 1.6rem !important;
    line-height: 5.8rem !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  /* About logo をウィンドウ幅に合わせてフレキシブルに調整 */
  .about-text img.display_pc {
    width: 80% !important;
    max-width: 800px !important;
    height: auto !important;
    margin: 0 auto 40px !important;
  }
  
  /* Underlineの調整 */
  .underline::after {
    bottom: 20px !important;
    height: 4px !important;
  }
  
  /* 880以下では卵のgapを5pxにし、左右の空白を狭く */
  #egg-pc {
    gap: 5px !important;
  }
  
  /* 卵セクション親要素に左右パディング追加 */
  .egg .display_pc {
    padding: 0 30px !important; /* 左右の空白を狭く調整 */
  }
  
  /* Footer - 1100px以下のPC版スタイルを維持 */
  /* .footer {
    position: relative !important;
    z-index: 1 !important;
    margin: auto !important;
  } */
  
  .footer-banner {
    position: relative !important;
    width: 500px !important;
    height: 180px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin-left: 20px !important;
    z-index: 2 !important;
  }
  
  .footer-banner .logo {
    width: auto !important; /* PC版スタイル */
    max-width: none !important;
  }
  
  /* .footer-banner .button {
    width: auto !important; 
    height: auto !important;
  } */
  
  /* Footer Policy - PC版スタイルを維持 */
  .footer-policy_pc {
    display: flex !important;
    justify-content: right !important;
    margin: 60px 40px 20px auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .footer-policy_sp {
    display: none !important;
  }
}

/* iPad Pro 11"/Air 横向き (820px - 1100px) - スマホベーススタイル維持 */
@media (min-width: 820px) and (max-width: 1100px) {
  /* 基本的にスマホベーススタイルを維持、サイズのみ微調整 */
  body #works-container {
    max-width: none !important;
    width: 100% !important;
    margin: 60px auto 50px 0 !important;
    padding: 0 30px !important;
  }
  
  body #works-container .inner {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body .image-item.large {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/9 !important;
  }
  
  /* About セクションのテキストサイズを少し大きく */
  .text-box p {
    /* font-size: 1.6rem !important; */ /* PC版と同じサイズに調整 */
    line-height: 5.8rem !important;
  }
  
  
  
  /* Contact のサイズ調整 */
  #contact-container img {
    width: 180px !important;
  }
  
  .contact-link {
    font-size: 1.8rem !important;
  }
  
  .contact-link p {
    font-size: 1.8rem !important;
  }
  
  /* Footer のサイズ調整 */
  .footer {
    margin: 35px 45px 35px !important;
  }
  
  /* .footer-banner {
    height: 140px !important;
  } */
  
  /* .footer-banner .logo {
    width: 180px !important;
  } */
  
  /* .footer-banner .button {
    width: 22px !important;
  } */
  
}

/* iPad特有の問題対応 */
@media (min-width: 761px) and (max-width: 1024px) {
  /* タッチデバイス用のホバー効果調整 */
  @media (hover: none) and (pointer: coarse) {
    #works-container .image-item:hover .overlay {
      opacity: 0;
    }
    
    #page-link li:hover .menu-icon {
      opacity: 0;
    }
    
    /* タップ時のみ表示 */
    #works-container .image-item:active .overlay {
      opacity: 0.5;
    }
  }
  
  /* Safariのバグ対応 */
  .display-flex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
  }
  
  /* アスペクト比の維持 */
  #works-container .image-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  /* スクロールのスムーズ化 */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* メンバーページのiPad対応 - スマホベース */
@media (min-width: 761px) and (max-width: 1024px) {
  .member-main {
    padding: 60px 40px;
    width: 100% !important;
    max-width: none !important;
  }
  
  .member-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0;
    text-align: center;
  }
  
  .member-image {
    width: 300px;
    height: 300px;
    margin: 0 auto 40px;
  }
  
  .member-info {
    font-size: 1.6rem;
    line-height: 2.8rem;
    text-align: left;
    padding: 0 20px;
  }
  
  .art-slider {
    margin: 60px 0;
    width: 100% !important;
    max-width: none !important;
  }
  
  .art-slider img {
    max-width: 100%;
    height: auto;
  }
}

/* ニュース・ポリシーページのiPad対応 - スマホベース */
@media (min-width: 761px) and (max-width: 1024px) {
  .news-container,
  .policy-container {
    padding: 60px 40px;
    max-width: none !important;
    width: 100% !important;
    margin: 0;
  }
  
  .news-item {
    padding: 30px 20px;
    margin-bottom: 20px;
  }
  
  .policy-content {
    font-size: 1.6rem;
    line-height: 2.8rem;
    text-align: left;
    max-width: none !important;
    width: 100% !important;
  }
  
  .policy-content h2 {
    font-size: 2.4rem;
    margin-bottom: 30px;
  }
  
  .policy-content p {
    margin-bottom: 20px;
  }
}

/* アニメーション調整 */
@media (min-width: 761px) and (max-width: 1024px) {
  /* フェードアニメーションの調整 */
  .fadeUpTrigger {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* スプラッシュ画面の調整 */
  #splash_logo img {
    max-width: 300px;
  }
}