@charset "UTF-8";
/* =========================================================
   ほいらく メディアサイト — トップページ固有のスタイル
   共通部分（配色・ヘッダー・フッターなど）は base.css にあります
   ========================================================= */

/* =========================================================
   ヒーロー
   ========================================================= */
.hm-hero{position:relative;padding-block:64px 0;overflow:hidden;}
.hm-hero-blob1{top:-140px;right:-120px;width:520px;height:520px;}
.hm-hero-blob2{bottom:-60px;left:-160px;width:420px;height:420px;color:#e9f3e4;}
.hm-hero-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.hm-hero-label{
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:22px;
  padding:.45em 1.1em;border-radius:999px;background:var(--hm-white);
  border:2px solid var(--hm-orange-l);
  font-family:var(--f-round);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--hm-orange-d);
}
.hm-hero-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hm-orange);}
.hm-hero h1{
  font-family:var(--f-round);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.42;letter-spacing:.02em;
}
.hm-hero h1 .hm-marker{
  background:linear-gradient(transparent 62%, #ffe08a 62%, #ffe08a 94%, transparent 94%);
  padding-inline:.06em;
}
.hm-hero h1 .hm-accent{color:var(--hm-orange);}
.hm-hero-lead{
  margin-top:26px;font-size:1rem;line-height:2.15;color:var(--hm-text-s);max-width:30em;
}
.hm-hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;}

/* ヒーロー右：写真＋フローティングカード */
.hm-hero-visual{position:relative;}
.hm-hero-photo{
  position:relative;aspect-ratio:1/1;border-radius:46% 54% 52% 48% / 50% 46% 54% 50%;
  overflow:hidden;box-shadow:0 18px 44px rgba(150,110,60,.20);
}
.hm-hero-photo img{width:100%;height:100%;object-fit:cover;}
.hm-float{
  position:absolute;display:flex;align-items:center;gap:10px;
  padding:.8em 1.15em;border-radius:16px;background:var(--hm-white);
  box-shadow:var(--sh-card);
  font-family:var(--f-round);font-weight:700;font-size:.84rem;line-height:1.5;letter-spacing:.03em;
  animation:hm-bob 4s ease-in-out infinite;
}
.hm-float i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;}
.hm-float i svg{width:19px;height:19px;color:#fff;}
.hm-float-1{top:6%;left:-6%;animation-delay:0s;}
.hm-float-1 i{background:var(--cat-money);}
.hm-float-2{bottom:14%;left:-10%;animation-delay:.8s;}
.hm-float-2 i{background:var(--cat-work);}
.hm-float-3{bottom:2%;right:2%;animation-delay:1.6s;}
.hm-float-3 i{background:var(--cat-manga);}
@keyframes hm-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion:reduce){.hm-float{animation:none;}}

/* 人気キーワード */
.hm-keywords{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:56px;padding-top:32px;border-top:1px dashed var(--hm-line);
}
.hm-keywords-ttl{
  font-family:var(--f-round);font-weight:700;font-size:.86rem;letter-spacing:.1em;
  color:var(--hm-text-s);margin-right:8px;
}
.hm-kw{
  display:inline-block;padding:.5em 1.05em;border-radius:999px;
  background:var(--hm-white);border:1px solid var(--hm-line);
  font-size:.82rem;color:var(--hm-text-s);letter-spacing:.04em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.hm-kw:hover{background:var(--hm-orange);border-color:var(--hm-orange);color:#fff;}

/* =========================================================
   カテゴリータイル
   ========================================================= */
.hm-catnav{padding-block:80px;}
.hm-catnav-list{
  display:grid;grid-template-columns:repeat(8,1fr);gap:14px;
}
.hm-cat{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 8px 18px;border-radius:var(--r-l);
  background:var(--hm-white);box-shadow:var(--sh-card);
  text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-cat:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h);}
.hm-cat-icon{
  width:60px;height:60px;border-radius:20px;display:grid;place-items:center;flex:none;
}
.hm-cat-icon svg{width:32px;height:32px;color:#fff;}
.hm-cat span{
  font-family:var(--f-round);font-weight:700;font-size:.84rem;line-height:1.5;letter-spacing:.02em;
}
.hm-cat[data-cat="hokatsu"] .hm-cat-icon{background:var(--cat-hokatsu);}
.hm-cat[data-cat="en"]      .hm-cat-icon{background:var(--cat-en);}
.hm-cat[data-cat="kosodate"] .hm-cat-icon{background:var(--cat-kosodate);}
.hm-cat[data-cat="work"]    .hm-cat-icon{background:var(--cat-work);}
.hm-cat[data-cat="money"]   .hm-cat-icon{background:var(--cat-money);}
.hm-cat[data-cat="baby"]    .hm-cat-icon{background:var(--cat-baby);}
.hm-cat[data-cat="manga"]   .hm-cat-icon{background:var(--cat-manga);}
.hm-cat[data-cat="game"]    .hm-cat-icon{background:var(--cat-game);}

/* =========================================================
   PICKUP（特集スライダー）
   ========================================================= */
.hm-pickup{position:relative;overflow:hidden;}
.hm-pickup-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 26px;margin-inline:-4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hm-pickup-track::-webkit-scrollbar{display:none;}
.hm-pick{
  flex:0 0 min(84vw,540px);scroll-snap-align:start;
  border-radius:var(--r-l);overflow:hidden;background:var(--hm-white);
  box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-pick:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h);}
.hm-pick-img{position:relative;aspect-ratio:16/9;overflow:hidden;}
.hm-pick-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.hm-pick:hover .hm-pick-img img{transform:scale(1.06);}
.hm-pick-img .hm-badge{position:absolute;left:16px;top:16px;}
.hm-pick-body{padding:22px 24px 26px;}
.hm-pick-ttl{
  font-family:var(--f-round);font-weight:700;font-size:1.14rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-pick-ex{margin-top:.7em;font-size:.88rem;line-height:1.9;color:var(--hm-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hm-pick-meta{display:flex;align-items:center;gap:12px;margin-top:16px;}

/* スライダーの矢印 */
.hm-slider-nav{display:flex;gap:10px;}
.hm-arrow{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--hm-white);box-shadow:var(--sh-card);color:var(--hm-orange);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hm-arrow:hover{background:var(--hm-orange);color:#fff;}
.hm-arrow svg{width:16px;height:16px;}

/* =========================================================
   シミュレーション
   ========================================================= */
.hm-sim{position:relative;overflow:hidden;}
.hm-sim-blob{top:40px;left:-180px;width:460px;height:460px;color:#fff1dc;}
.hm-sim-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;z-index:1;}
.hm-simcard{
  position:relative;display:flex;flex-direction:column;
  padding:36px 28px 32px;border-radius:var(--r-l);background:var(--hm-white);
  box-shadow:var(--sh-card);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-simcard::before{
  content:"";position:absolute;inset:0 0 auto;height:7px;background:var(--sim-c,var(--hm-orange));
}
.hm-simcard:hover{transform:translateY(-8px);box-shadow:var(--sh-card-h);}
.hm-simcard-illust{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;
  background:var(--sim-bg,#fff1de);
}
.hm-simcard-illust svg{width:52px;height:52px;color:var(--sim-c,var(--hm-orange));}
.hm-simcard-en{
  font-family:var(--f-en);font-size:.74rem;letter-spacing:.22em;color:var(--sim-c,var(--hm-orange));
  font-weight:500;margin-bottom:.5em;text-transform:uppercase;
}
.hm-simcard h3{font-family:var(--f-round);font-weight:700;font-size:1.28rem;line-height:1.5;}
.hm-simcard p{margin-top:.9em;font-size:.88rem;line-height:1.95;color:var(--hm-text-s);}
.hm-simcard-go{
  display:inline-flex;align-items:center;gap:.5em;margin-top:22px;
  font-family:var(--f-round);font-weight:700;font-size:.9rem;color:var(--sim-c,var(--hm-orange));
}
.hm-simcard-go::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease);}
.hm-simcard:hover .hm-simcard-go::after{transform:rotate(45deg) translate(3px,-3px);}
.hm-sim-note{
  margin-top:34px;text-align:center;font-size:.82rem;color:var(--hm-muted);position:relative;z-index:1;
}

/* =========================================================
   コラム（タブ＋グリッド）
   ========================================================= */
.hm-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px;}
.hm-tab{
  padding:.7em 1.7em;border-radius:999px;background:var(--hm-white);
  border:2px solid var(--hm-line);
  font-family:var(--f-round);font-weight:700;font-size:.9rem;letter-spacing:.06em;color:var(--hm-text-s);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.hm-tab:hover{border-color:var(--hm-orange-l);color:var(--hm-orange);}
.hm-tab[aria-selected="true"]{background:var(--hm-orange);border-color:var(--hm-orange);color:#fff;}

.hm-posts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;}
.hm-post{
  display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;
  background:var(--hm-white);box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-post:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h);}
.hm-post-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--hm-cream-2);}
.hm-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.hm-post:hover .hm-post-img img{transform:scale(1.06);}
.hm-post-img .hm-badge{position:absolute;left:12px;top:12px;}
.hm-post-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;}
.hm-post-ttl{
  font-family:var(--f-round);font-weight:700;font-size:.98rem;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-post-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.hm-tag{font-size:.74rem;color:var(--hm-muted);letter-spacing:.03em;}
.hm-tag::before{content:"#";color:var(--hm-orange-l);}
.hm-post .hm-date{margin-top:auto;padding-top:14px;}

/* =========================================================
   コンテンツ（まんが・アニメ・イラスト）
   ========================================================= */
.hm-contents{background:var(--hm-cream-2);position:relative;overflow:hidden;}
.hm-contents-blob{right:-140px;bottom:-120px;width:440px;height:440px;color:#ffe0e6;}
.hm-mangas{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 24px;margin-inline:-4px;scrollbar-width:none;
}
.hm-mangas::-webkit-scrollbar{display:none;}
.hm-manga{
  flex:0 0 min(60vw,236px);scroll-snap-align:start;
  border-radius:var(--r-m);overflow:hidden;background:var(--hm-white);box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-manga:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--sh-card-h);}
.hm-manga-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--hm-peach);}
.hm-manga-img img{width:100%;height:100%;object-fit:cover;}
.hm-manga-img .hm-badge{position:absolute;left:10px;top:10px;}
.hm-manga p{
  padding:13px 15px 17px;font-family:var(--f-round);font-weight:700;font-size:.86rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* コンテンツ内の3枚バナー */
.hm-cbanners{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;position:relative;z-index:1;}
.hm-cbanner{
  display:flex;align-items:center;gap:18px;padding:24px 26px;border-radius:var(--r-l);
  background:var(--hm-white);box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-cbanner:hover{transform:translateY(-6px);box-shadow:var(--sh-card-h);}
.hm-cbanner i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:none;background:var(--cb-c,var(--hm-orange));}
.hm-cbanner i svg{width:30px;height:30px;color:#fff;}
.hm-cbanner b{display:block;font-family:var(--f-round);font-weight:700;font-size:1.05rem;line-height:1.5;}
.hm-cbanner small{display:block;font-size:.8rem;color:var(--hm-muted);margin-top:.35em;line-height:1.7;}

/* =========================================================
   ゲーム
   ========================================================= */
.hm-games-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.hm-game{
  position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--hm-white);
  box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hm-game:hover{transform:translateY(-8px);box-shadow:var(--sh-card-h);}
.hm-game-img{position:relative;aspect-ratio:16/10;overflow:hidden;}
.hm-game-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.hm-game:hover .hm-game-img img{transform:scale(1.06);}
.hm-game-play{
  position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;
  background:var(--hm-orange);display:grid;place-items:center;box-shadow:0 6px 16px rgba(200,95,0,.35);
}
.hm-game-play svg{width:20px;height:20px;color:#fff;margin-left:3px;}
.hm-game-body{padding:20px 22px 24px;}
.hm-game-body h3{font-family:var(--f-round);font-weight:700;font-size:1.08rem;line-height:1.6;}
.hm-game-body p{margin-top:.6em;font-size:.85rem;line-height:1.85;color:var(--hm-muted);}
.hm-game-meta{display:flex;gap:8px;margin-top:14px;}
.hm-chip{
  padding:.3em .85em;border-radius:999px;background:var(--hm-cream-2);
  font-size:.72rem;color:var(--hm-text-s);letter-spacing:.04em;
}

/* =========================================================
   お知らせ ＋ SNS
   ========================================================= */
.hm-bottom{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start;}
.hm-news-list{border-top:1px dashed var(--hm-line);}
.hm-news-list li{border-bottom:1px dashed var(--hm-line);}
.hm-news-list a{
  display:flex;align-items:center;gap:18px;padding:1.25em .4em;
  transition:background .3s var(--ease);
}
.hm-news-list a:hover{background:var(--hm-white);}
.hm-news-list .hm-date{flex:none;}
.hm-news-ttl{
  font-size:.94rem;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-side-ttl{
  font-family:var(--f-round);font-weight:700;font-size:1rem;letter-spacing:.1em;
  margin-bottom:18px;padding-left:.8em;border-left:4px solid var(--hm-orange);line-height:1.4;
}
.hm-sns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px;}
.hm-sns a{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--hm-white);box-shadow:var(--sh-card);color:var(--hm-text-s);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.hm-sns a:hover{background:var(--hm-orange);color:#fff;transform:translateY(-3px);}
.hm-sns svg{width:20px;height:20px;}
.hm-line-panel{
  padding:26px 24px 28px;border-radius:var(--r-l);background:#f2fbf3;border:2px dashed #a8d8ae;
}
.hm-line-panel b{display:block;font-family:var(--f-round);font-weight:700;font-size:1.02rem;line-height:1.6;}
.hm-line-panel p{margin-top:.6em;font-size:.83rem;line-height:1.85;color:var(--hm-text-s);}
.hm-line-panel .hm-btn{width:100%;min-width:0;margin-top:18px;background:#06c755;box-shadow:0 5px 0 #05a044;}
.hm-line-panel .hm-btn:hover{background:#05b34c;box-shadow:0 2px 0 #05a044;}

/* =========================================================
   ほいらくについて（帯）
   ========================================================= */
.hm-about{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff3e2 0%,#ffe9d0 100%);
}
.hm-about-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;position:relative;z-index:1;}
.hm-about-photo{border-radius:var(--r-l);overflow:hidden;box-shadow:0 14px 34px rgba(150,110,60,.18);aspect-ratio:4/3;}
.hm-about-photo img{width:100%;height:100%;object-fit:cover;}
.hm-about h2{font-family:var(--f-round);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.05rem);line-height:1.6;}
.hm-about p{margin-top:1.2em;font-size:.95rem;line-height:2.1;color:var(--hm-text-s);}
.hm-about .hm-btn{margin-top:30px;}

/* =========================================================
   レスポンシブ（トップページ）
   ========================================================= */
@media (max-width:1180px){
  .hm-catnav-list{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:1024px){
  .hm-hero-in{grid-template-columns:1fr;gap:44px;}
  .hm-hero-visual{max-width:460px;margin-inline:auto;width:100%;}
  .hm-hero-lead{max-width:none;}
  .hm-posts{grid-template-columns:repeat(3,1fr);}
  .hm-games-list{grid-template-columns:repeat(2,1fr);}
  .hm-bottom{grid-template-columns:1fr;gap:40px;}
  .hm-about-in{grid-template-columns:1fr;gap:36px;}
}

@media (max-width:820px){
  .hm-sim-list{grid-template-columns:1fr;gap:20px;}
  .hm-simcard{flex-direction:row;align-items:flex-start;gap:22px;padding:30px 24px;}
  .hm-simcard-illust{width:76px;height:76px;margin-bottom:0;}
  .hm-cbanners{grid-template-columns:1fr;gap:14px;}
  .hm-cbanner{padding:20px 22px;}
}

@media (max-width:640px){
  .hm-hero{padding-top:44px;}
  .hm-hero h1{line-height:1.55;}
  .hm-hero-btns{gap:12px;}
  .hm-hero-btns .hm-btn{width:100%;min-width:0;}
  .hm-float{font-size:.76rem;padding:.65em .9em;}
  .hm-float i{width:28px;height:28px;}
  .hm-float-1{left:-2%;}
  .hm-float-2{left:-4%;}
  .hm-keywords{margin-top:40px;}
  .hm-catnav{padding-block:56px;}
  .hm-catnav-list{grid-template-columns:repeat(2,1fr);gap:10px;}
  .hm-cat{flex-direction:row;padding:14px 16px;gap:14px;text-align:left;}
  .hm-cat-icon{width:46px;height:46px;border-radius:15px;}
  .hm-cat-icon svg{width:24px;height:24px;}
  .hm-cat span{font-size:.8rem;letter-spacing:0;}
  .hm-posts{grid-template-columns:repeat(2,1fr);gap:18px 14px;}
  .hm-post-body{padding:13px 14px 17px;}
  .hm-post-ttl{font-size:.9rem;}
  .hm-games-list{grid-template-columns:1fr;gap:18px;}
  .hm-simcard{flex-direction:column;}
  .hm-simcard-illust{width:72px;height:72px;margin-bottom:16px;}
  .hm-news-list a{flex-direction:column;align-items:flex-start;gap:6px;padding:1.1em .2em;}
  .hm-news-ttl{-webkit-line-clamp:2;}
}