/**
 * スマートフォン向けスタイル（画面幅 768px 以下で自動適用）
 * HTML の <link media="(max-width: 768px)"> により PC では読み込まれません。
 */

/* PC専用ブロックを非表示 / スマホ専用ブロックを表示 */
.for-desktop{display:none !important}
.for-mobile{display:block !important}
.for-mobile--flex{display:flex !important}
.for-mobile--inline{display:inline !important}

/* ---- 画面幅に収める（全体） ---- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
.siteHeader,
.container,
.homeMain,
main,
.homeSection,
.section-product,
#productSection,
.homeCarouselSection,
.card,
.detailBar,
.filterBar,
.googleFormWrap,
.footer{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
img,svg,video,iframe,
.mainImage,.cover,.homeCarouselImage,.logo,.aboutHeroLogo{
  max-width:100%;
}
p,h1,h2,h3,h4,li,a,dd,dt,
.sectionLead,.newsText,.newsTitle,.eventName{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.container{
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
}

/* ---- ヘッダー（コンパクト + ハンバーガー） ---- */
.siteHeader{
  padding-top:4px;
  padding-bottom:8px;
}
.header{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  position:relative;
}
.brand{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}
.subtitle{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
.menuToggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;
}
.menuToggleBar{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  border-radius:1px;
  transition:transform .15s ease, opacity .15s ease;
}
.menuToggle[aria-expanded="true"] .menuToggleBar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.menuToggle[aria-expanded="true"] .menuToggleBar:nth-child(2){
  opacity:0;
}
.menuToggle[aria-expanded="true"] .menuToggleBar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
#headerPanel{
  display:none;
  width:100%;
  flex-basis:100%;
  margin-left:0;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:10px 0 2px;
  border-top:1px solid var(--line);
  margin-top:4px;
}
#headerPanel.is-open{
  display:flex;
}
#headerPanel .nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
#headerPanel .nav a{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding:10px 12px;
}
#headerPanel .langTabs{
  width:100%;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  padding-top:4px;
  border-top:1px solid var(--line);
}
#headerPanel .langTabs a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
body.menu-open{
  overflow:hidden;
}

/* ---- セクション共通 ---- */
.sectionHead{
  flex-direction:column;
  align-items:flex-start;
}
.sectionLead{
  width:100%;
}
.homeMain > .homeSection{
  padding:12px;
}
.newsArchiveItem{
  flex-direction:column;
  align-items:flex-start;
}
.newsArchiveDate{
  min-width:0;
  width:auto;
}
.filterBar{
  width:100%;
  max-width:100%;
}
.filterBar input{
  max-width:100%;
}

/* ---- 商品紹介・カルーセル ---- */
.section-product,
.homeCarouselSection{
  overflow:hidden;
}
.homeCarousel{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0 28px;
  box-sizing:border-box;
}
.homeCarouselViewport{
  width:100%;
  max-width:100%;
}
.homeCarouselItem{
  max-width:100%;
}
.homeCarouselLink{
  max-width:100%;
}
.homeCarouselArrow{
  width:32px;
  height:32px;
  font-size:16px;
}
#homeCarouselPrev{left:2px}
#homeCarouselNext{right:2px}
.homeCarouselImage{
  width:100%;
  max-width:100%;
  max-height:min(220px, 36vh);
  height:auto;
}
.homeCarouselTitle{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}

/* ---- サークル紹介 ---- */
.aboutHero{
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.aboutHeroLogo{
  height:auto;
  width:100%;
  max-width:200px;
}

/* ---- イベント ---- */
.eventName{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}

/* ---- リンク行 ---- */
.linkRow{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.linkSep{display:none}

/* ---- ゲーム一覧 ---- */
.grid{
  grid-template-columns:1fr;
}
.filterBar input{
  flex:1 1 100%;
  min-width:0;
  width:100%;
  font-size:16px;
}
.filterBar .btn,
.filterBar button{
  width:100%;
  text-align:center;
  min-height:44px;
}

/* ---- ゲーム詳細 ---- */
.meta > div{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.buttons .btn{
  width:100%;
  text-align:center;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---- お問い合わせ ---- */
.googleFormWrap{
  max-width:100%;
}
.googleFormEmbed{
  min-height:clamp(720px, 92vh, 1100px);
}

/* ---- フッター（ナビ非表示・著作権のみ） ---- */
.footerRow{
  justify-content:center;
  text-align:center;
}
.footerNav{
  display:none !important;
}

/* 極小画面（〜400px） */
@media(max-width:400px){
  .title{
    font-size:1.35rem;
  }
  .homeCarousel{
    padding:0 24px;
  }
  .homeMain > .homeSection{
    padding:10px;
  }
}