@charset "utf-8";

@media screen and (min-width: 1201px) {
  .smart-hero {
    display: none;
  }
  .pc-hero {
    display: block;
  }
  .tablet-hero {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .smart-hero {
    display: none;
  }
  .pc-hero {
    display: none;
  }
  .tablet-hero {
    display: block;
  }

  #story_bg #story_area .story_slide2.smart,
  #story_bg_append #story_area .story_slide2.smart {
    max-width: 700px; /* コンテナの最大幅をPC版に近いサイズに拡大 */
    height: auto;     /* 高さを画像に合わせて自動調整 */
  }

  #story_bg #story_area .story_slide2.smart .story_img img,
  #story_bg_append #story_area .story_slide2.smart .story_img img {
    max-width: 100%;  /* 画像がコンテナの幅いっぱいに表示されるように設定 */
  }

  #story_bg #story_area .dots.smart{
    gap: 20px; /* ドット間の間隔を広げる */
    margin-top: 30px; /* 上部の余白を調整 */
  }
  #story_bg_append #story_area .dots.smart {
    gap: 70px; /* ドット間の間隔を広げる */
    margin-top: 30px; /* 上部の余白を調整 */
  }

  #story_bg #story_area .dots.smart img,
  #story_bg_append #story_area .dots.smart img {
    height: 30px; /* ドットの高さを大きくする（幅は自動で調整されます） */
    width: auto;
  }

  /* スライド用ナビゲーションドット（タブレット用） */
  .dots.smart {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: auto auto;
    opacity: 1 !important;
    height: auto;
    width: auto;
    flex-wrap: wrap;
  }
  /* アクティブなドットコンテナのみ表示 */
  .dots.smart.show {
    display: flex !important;
  }

  /* タブレット用キャラクターボタンの調整 */
  #character_area .character_btn_sp.smart,
  #character_area_append .character_btn_sp.smart {
    width: 100% !important;
    max-width: 800px;
    margin: 0 auto 20px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 1.5%;
    flex-wrap: nowrap;
    padding: 0 20px;
    opacity: 1 !important;
  }

  /* Slickスライダーを無効化 */
  #character_area .character_btn_sp.smart.slick-initialized,
  #character_area_append .character_btn_sp.smart.slick-initialized {
    display: flex !important;
  }

  #character_area .character_btn_sp.smart .slick-list,
  #character_area_append .character_btn_sp.smart .slick-list {
    overflow: visible !important;
    width: 100% !important;
  }

  #character_area .character_btn_sp.smart .slick-track,
  #character_area_append .character_btn_sp.smart .slick-track {
    width: 100% !important;
    display: flex !important;
    transform: none !important;
    justify-content: center;
  }

  .character_btn_sp.smart li {
    width: calc(100% / 7) !important;
    max-width: 100px;
    margin: 0 !important;
    padding: 0 5px;
    flex-shrink: 0;
  }

  #character_area .character_btn_sp.smart li,
  #character_area_append .character_btn_sp.smart li {
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* Slickトラックの幅を制御 */
  .main_chara_sp.smart .slick-track {
    display: flex !important;
    align-items: center;
  }

  /* スライダーコンテナの中央配置 */
  .main_chara_sp.smart {
    max-width: 500px !important;
    margin: 0 auto;
  }

  /* Slickのビューポート制御 */
  .main_chara_sp.smart .slick-list {
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* キャラクター画像の高さを統一（トランジションを無効化） */
  .main_chara_sp.smart .chara_picture_sp {
    height: 1200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: none !important; /* トランジションを無効化 */
  }

  .main_chara_sp.smart .chara_picture_sp img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
    display: block;
    transition: none !important; /* トランジションを無効化 */
  }

  /* Slick初期化前の状態を設定 */
  .main_chara_sp.smart:not(.slick-initialized) .chara_picture_sp {
    height: 1200px !important;
  }

  .main_chara_sp.smart:not(.slick-initialized) .chara_picture_sp img {
    height: 100% !important;
    width: auto !important;
  }

  /* スライダーコンテナの高さも固定 */
  .main_chara_sp.smart,
  .main_chara_sp.smart .slick-list,
  .main_chara_sp.smart .slick-track,
  .main_chara_sp.smart .slick-slide {
    height: 1200px !important;
  }

  .chara1-sp-img,
  .chara2-sp-img,
  .chara3-sp-img,
  .chara4-sp-img,
  .chara5-sp-img,
  .chara6-sp-img,
  .chara1-sp-img_append,
  .chara2-sp-img_append,
  .chara3-sp-img_append {
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    transition: none;
    transform: scale(0.8) translateY(-150px);
  }

  /* 各キャラクター画像の個別拡大率設定 */
  .chara1-sp-img {
    transform: scale(0.8) translateY(-150px);
  }

  .chara2-sp-img {
    transform: scale(1.0) translateY(-110px);
  }

  .chara3-sp-img {
    transform: scale(0.76) translateY(-170px);
  }

  .chara4-sp-img {
    transform: scale(0.89) translateY(-110px);
  }

  .chara5-sp-img {
    transform: scale(1) translateY(-105px);
  }

  .chara6-sp-img {
    transform: scale(0.9) translateY(-100px);
  }

  /* 各キャラクター画像の個別拡大率設定 */
  .chara1-sp-img_append {
    transform: scale(0.93) translateY(-120px);
  }

  .chara2-sp-img_append {
    transform: scale(1.0) translateY(-110px);
  }

  .chara3-sp-img_append {
    transform: scale(0.82) translateY(-143px);
  }

  /* キャラクター情報エリア全体を上に移動 */
  .main_chara_sp2 {
    margin-top: -250px !important;  /* 50px上に移動（値は調整可能） */
  }

  /* Others キャラクターボタンのグリッドレイアウト */
  .main_otherSlide_area.other_btn_sp {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px; /* タブレット用に間隔を調整 */
    justify-items: center;
    align-items: center;
    max-width: 600px; /* タブレット用にサイズ調整 */
    margin: 0 auto;
    padding: 20px;
  }

  /* 各ボタンのサイズ調整 */
  .main_otherSlide_area.other_btn_sp .main_otherSlide {
    width: 100%;
    max-width: 150px; /* タブレット用にサイズ調整 */
    text-align: center;
  }

  .main_otherSlide_area.other_btn_sp .other_btn_li {
    width: 100%;
    margin: 0; /* 既存のマージンをリセット */
  }

  /* ::after要素を無効化（グリッドレイアウトでは不要） */
  .main_otherSlide_area.other_btn_sp::after {
    display: none;
  }

  /* Others セクション全体の調整 */
  #otherSlide_area .contents {
    padding: 0 20px;
  }

  #gallery_pos0.main_gallery_box0,
  #gallery_pos5.main_gallery_box0,
  #gallery_pos6.main_gallery_box0,
  #gallery_pos3.main_gallery_box0,
  #gallery_pos4.main_gallery_box0 {
    margin-left: 0 !important;
    padding: 0 20px;
  }

  .main_gallery_box0 {
    margin-left: 0 !important;
    padding: 0 20px;
  }

  /* Special セクションをPC版と同じレイアウトに */
  .special_logo {
    width: 30% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }

  #special_area .special_list {
    width: 100% !important;
    margin: 45px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #special_area .special_list li {
    width: 25% !important;
    margin: 20px 2% !important;
    overflow: hidden !important;
    background: rgba(66, 33, 11, 0.1) !important;
  }

  #special_area .special_list li img {
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .smart-hero {
    display: block;
  }
  .pc-hero {
    display: none;
  }
  .tablet-hero {
    display: none;
  }

  /* bodyレベルでの横スクロール防止（スマホのみ） */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* メインビジュアル以外のエリアでのタッチ制御 */
  #top_bg,
  #story_bg,
  #story_bg_append,
  #character_area,
  #character_area_append,
  #gallery_area,
  #gallery_area_append,
  #special_bg,
  #product_bg,
  #package_area,
  #otherSlide_area {
    touch-action: pan-y;
  }

  /* メインビジュアルのタッチ制御は維持 */
  #mainvisual_area {
    touch-action: pan-x pan-y;
  }

  #gallery_area {
    background-image: url("../img/gallery/gallery_bg.webp");
    background-attachment: scroll;
    background-size: cover; /* 画面を覆うように設定 */
    background-position: center;
  }

  /* パッケージエリアの背景を画面全体に表示 */
  #package_area {
    background-attachment: scroll;
    background-size: cover; /* 画面を覆うように設定 */
    background-position: center;
  }

  .package-link {
    background: rgba(150, 90, 130, 0.20); /* 赤みがかった半透明の背景 */
    backdrop-filter: blur(20px);
  }

  .package-link:hover {
    transform: translateY(-3px); /* カードが少し上に浮き上がる */
    box-shadow: 0 8px 20px rgba(2, 8, 38, 0.2); /* 影を付けて立体感を出す */
    background: rgba(150, 90, 130, 0.20);
  }

  #story_bg {
    background-image: url("../img/story/story_bg_sp.webp");
    background-attachment: scroll;
    background-size: cover; /* 画面を覆うように設定 */
    background-position: center;
  }

  /* gallery_pos0, gallery_pos5, gallery_pos6, gallery_pos3, gallery_pos4のスマホ版調整 */
  #gallery_pos0.main_gallery_box0,
  #gallery_pos5.main_gallery_box0,
  #gallery_pos6.main_gallery_box0,
  #gallery_pos3.main_gallery_box0,
  #gallery_pos4.main_gallery_box0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
  }

  /* すべてのmain_gallery_box0をスマホで横幅いっぱいに */
  .main_gallery_box0 {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100%;
    padding: 0 5%; /* 左右に少しパディングを追加 */
    box-sizing: border-box;
  }

  /* ギャラリーアイテム内のマージン調整 */
  .main_gallery_box0 .gallery_box0,
  .main_gallery_box0 .gallery_box2,
  .main_gallery_box0 .gallery_box7 {
    margin-right: 2.5% !important;
  }

  .main_gallery_box0 .gallery_box4,
  .main_gallery_box0 .gallery_box9 {
    margin-left: 2.5% !important;
  }

  /* 最後の要素の右マージンを削除 */
  .main_gallery_box0 > div:last-child {
    margin-right: 0 !important;
  }

  /* 最初の要素の左マージンを削除 */
  .main_gallery_box0 > div:first-child {
    margin-left: 0 !important;
  }

  #character_area {
    background: url("../img/character/character_bg_sp.webp") no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: top center;
    padding: 60px 0 70px;
    position: relative;
  }
}