@charset "UTF-8";

/* =========================
   Header (左右同幅 + 画面幅で伸縮 + title最小幅)
   ========================= */
/* ヘッダーを確実に固定（stickyではなくfixed） */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg);
  border-bottom: 3px solid rgba(0,0,0,.08);

  transition: transform 480ms ease, opacity 480ms ease;
  will-change: transform, opacity;
}

/* 隠す：上へスライド */
.site-header.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* 隠す：上へスライド（高さは変えない＝stickyが壊れない） */
.site-header.is-hidden{
  transform: translateY(-110%); /* ヘッダー全体を上に逃がす */
  opacity: 0.0;
  pointer-events: none;
}


.site-header.is-hidden{
  max-height: 0;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  border-bottom: 0;
}

/* たたむときの余白を消す（中身が残って高さを食わないように） */
.site-header.is-hidden .header-inner{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 左右の枠幅を「画面サイズに合わせて伸縮」させる
   - 画面が狭いと縮む（min）
   - 広いとほどよく広がる（max）
*/
:root{
  /* 例：スマホ最小 88px〜、通常はvwで伸縮〜、PC最大 300px */
  --st1-sideW: clamp(88px, 14vw, 300px);
  --st1-menuMax: 1024px;
}

/* 1380pxまではコンテナ、1380px以上はフル幅 */
.header-inner{
  width: min(100% - 28px, 1380px);
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 14px) 0;

  display: grid;
  grid-template-columns: var(--st1-sideW) 1fr var(--st1-sideW);
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo title menuBtn"
    "logo menu  menuBtn";
  align-items: center;
  column-gap: clamp(8px, 1.2vw, 14px);
  row-gap: clamp(6px, 1vw, 10px);
}

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

@media (min-width: 1380px){
  .header-inner{
    width: 100%;
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---- 左：ロゴ（枠内で左寄せ） ---- */
.header-logo{
  grid-area: logo;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-logo img{
  /*height: clamp(40px, 4.2vw, 66px);*/
	height: clamp(64px, 6.2vw, 106px); 
  	width: auto;            /* 比率維持 */
   	max-width: 100%;
  	display: block;
}

/* ---- 中央上：タイトル（真ん中固定）
   ★800px以下でも最小幅180pxを保証するため min-width を付与
*/
.header-title{
  grid-area: title;
  justify-self: center;
  display: flex;
  justify-content: center;
  min-width: 180px;       /* ★要件 */
}
.header-title img{
  height: clamp(46px, 5.0vw, 78px);
  width: auto;            /* 比率維持 */
  max-width: 100%;
  display: block;
}


/* ---- 右：ポップアップメニューボタン（枠内で右寄せ） ---- */
.menu-btn{
  grid-area: menuBtn;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.menu-btn img{
  height: clamp(40px, 4.2vw, 66px);
  width: auto;            /* 比率維持 */
  max-width: 100%;
  display: block;
}

/* ---- 中央下：メニューバー（max-width 1024 / 真ん中固定） ---- */
.header-menu{
  grid-area: menu;
  justify-self: center;

  width: min(100%, var(--st1-menuMax));
  display: flex;
  justify-content: center;
  align-items: center;
  /*gap: clamp(10px, 1.2vw, 16px);*/
  gap: clamp(10px, 1.2vw, 18px);
  flex-wrap: nowrap;
}

/* メニューアイテム：縦（height）だけで調整、横は auto（比率維持） */
.header-menu .menu-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-menu .menu-item img{
  height: clamp(38px, 3.8vw, 56px); /* 少し大きく */
  width: auto;                       /* 比率維持（横は変えない） */
  display: block;
}

/* =========================
   800px以下：上段（ロゴ/タイトル/ボタン）＋下段（メニュー）
   ※左右枠も画面に合わせてさらに縮むように調整
   ========================= */
@media (max-width: 800px){
  :root{
    /* スマホ域では左右枠をもう少し絞る（ただし同幅は維持） */
    --st1-sideW: clamp(72px, 18vw, 170px);
  }

  .header-inner{
    width: min(100% - 20px, 1100px);
    grid-template-columns: var(--st1-sideW) 1fr var(--st1-sideW);
    grid-template-areas:
      "logo title menuBtn"
      "menu menu  menu";
  }

  /* ★要件：800px以下でもタイトル最小幅180pxは維持 */
  .header-title{ min-width: 180px; }


	.header-logo img{
	    height: clamp(40px, 4.2vw, 66px);
	}

  .header-menu{
    width: min(100%, var(--st1-menuMax));
    /*gap: 10px;*/
    gap: 10px;
    flex-wrap: nowrap;
  }

  .header-menu .menu-item img{
    height: clamp(34px, 5.1vw, 50px); /* 少し大きく */
    width: auto;
    display: block;
  }

}

/* =========================
   640px以下：タイトル左右バナー用に上段を圧縮
   ========================= */
@media (max-width: 640px){
  :root{
    --st1-sideW: clamp(56px, 13vw, 84px);
  }

  .header-inner{
    width: min(100% - 12px, 1100px);
    column-gap: 8px;
  }

  .header-title{
    min-width: 136px;
  }

  .header-title img{
    height: clamp(35px, 6.8vw, 44px);
  }

  .header-logo img{
    width: min(58px, 100%);
    height: auto;
  }

  .menu-btn img{
    height: clamp(28px, 6.4vw, 42px);
    width: auto;
  }
}

/* =========================
   640px以下：メニュー
   ========================= */
@media (max-width: 480px){
	/* ２段の場合 */
/*  .header-menu{
    display: grid;
    width: min(100%, var(--st1-menuMax));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    justify-items: center;
    align-items: center;
  }*/
  .header-menu{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;                 /* gapは使わずセル幅で均等にする */
    width: 100%;
    max-width: var(--st1-menuMax);
  }

  /* 4番目を非表示 */
  .header-menu .menu-item:nth-child(4){
    display: none; /* ST1_header_menuButton4.png を消す */
  }
  
  /* 残り4つを均等幅に（＝見た目の間隔が揃う） */
  .header-menu .menu-item{
    flex: 0 0 25%;          /* 4つなので 25%ずつ */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;         /* 画像同士が近すぎる場合の余白 */
  }
  
  .header-menu .menu-item:nth-child(2){ padding-right: 10px; }
  .header-menu .menu-item:nth-child(3){ padding-left: 10px; }  

  /* 画像は縦だけで制御、横は比率維持 */
  .header-menu .menu-item img{
    height: clamp(30px, 6.4vw, 46px); /* 少し大きく */
    width: auto;
    display: block;
  }

}

/* =========================
   Footer
   ========================= */
.site-footer{
  padding: 34px 0 44px;
  background: rgba(0,0,0,.06); /* 今のままでOK */
  border-top: 3px solid rgba(0,0,0,.12);
}

.footer-inner{
  	display     : grid;
  	grid-template-columns: 320px 1fr;
  	gap         : 22px;
  	align-items : start;
}

.footer-brand{
  	display     : grid;
  	gap         : 10px;
  	padding-left: 20px;
}

.footer-icon{
  width: 96px;
  height: auto;
  display: block;
}

@media (min-width: 861px){
	.footer-icon {
    	margin-left: 6px;
  	}
}

.footer-company{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
}

.footer-note{
  margin: 0;
  opacity: .8;
  font-size: 13px;
}

/* 右側リンク：2段レイアウト */
.footer-links{
  display: grid;
  gap: 12px;
}

.footer-links-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px; /* 縦横間隔 */
  align-items: center;
}

/* sns-cameraっぽく、リンクはブロック感を弱くして整列 */
.footer-links-row a{
  display: inline-block;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(0,0,0,.10);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.footer-links-row a:hover{
  text-decoration: underline;
}

.footer-sale-banner-link,
.header-sale-banner-link{
  display: block;
  margin-top: 6px;
}

.header-karire-promo-btn,
.hero-karire-promo-btn{
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

.footer-sale-banner,
.header-sale-banner{
  width: 20%;
  min-width: 200px;
  height: auto;
  display: block;
  border-radius: 6px;
}

.karire-promo-banner{
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
  border-radius: 6px;
}

#heroSaleBannerContainer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  gap: 12px;
}

#heroSaleBannerContainer .hero-karire-promo-btn{
  display: none;
  flex: 1 1 44%;
  max-width: 390px;
}

#heroSaleBannerContainer.with-karire-fallback{
  justify-content: center;
  flex-wrap: nowrap;
  gap: 32px;
}

#heroSaleBannerContainer.with-karire-fallback .hero-karire-promo-btn{
  display: block;
  flex: 0 0 auto;
  width: 90px;
  max-width: 90px;
}

#heroSaleBannerContainer.with-karire-fallback .header-sale-banner-link{
  flex: 0 0 auto;
  width: 180px;
  max-width: 180px;
  margin-top: 0;
}

#heroSaleBannerContainer .header-sale-banner-link{
  margin-top: 0;
  flex: 1 1 44%;
  max-width: 390px;
}

#heroSaleBannerContainer .header-sale-banner{
  width: 100%;
  min-width: 0;
}

/* ヘッダー内に移動した場合だけ、タイトルより少し小さく表示 */
.header-inner{
  position: relative;
}
.header-karire-promo-btn{
  position: absolute;
  display: none;
  z-index: 3;
}
.header-karire-promo-btn.is-active{
  display: block;
}
.hero-sale-container.in-header{
  position: absolute;
  margin: 0;
  padding: 0;
  max-width: none;
  z-index: 3;
}
.hero-sale-container.in-header .header-sale-banner-link{
  margin-top: 0;
}
.hero-sale-container.in-header .header-sale-banner{
  width: 100%;
  min-width: 0;
}

/* モバイル：横並び維持＋サイズ調整 */
@media (max-width: 860px){
  #heroSaleBannerContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  #heroSaleBannerContainer.with-karire-fallback{
    gap: 32px;
  }
  #heroSaleBannerContainer.with-karire-fallback .hero-karire-promo-btn{
    display: block;
    width: 90px;
    max-width: 90px;
    margin: 0;
  }
  #heroSaleBannerContainer.with-karire-fallback .header-sale-banner-link{
    width: 180px;
    max-width: 180px;
    margin: 0;
  }
  #heroSaleBannerContainer:not(.with-karire-fallback):not(.in-header) .header-sale-banner-link{
    display: block;
    width: min(80%, 420px);
    max-width: min(80%, 420px);
    margin: 0 auto;
  }
  .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-brand{
    justify-items: center;
    text-align: center;
  }
  .footer-links-row{
    justify-content: center;
  }
  .footer-sale-banner-link,
  .header-sale-banner-link{
    justify-self: center;
  }
  .footer-sale-banner,
  .header-sale-banner{
    width: 60%;
    margin: 0 auto;
  }
}

/* =========================
   Drawer (スマホメニュー)
   ========================= */
.drawer{ position: fixed; inset: 0; z-index: 500; }
.drawer-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.drawer-panel{
  position: absolute;
  right: 10px;
  top: 10px;
  width: min(92vw, 360px);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.drawer-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  margin-bottom: 6px;
}
.drawer-title-image{
  width: 76%;
  height: auto;
  display: block;
}
.drawer-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid #e66e7d;
  background: var(--paper);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #e66e7d;
}
.drawer-nav{
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}
.drawer-nav a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.drawer-nav a::before{
  content: "＊";
  color: #e66e7d;
  font-size: 0.95em;
  line-height: 1;
  flex: 0 0 auto;
}
.drawer-cta{
  display: grid;
  gap: 10px;
  justify-items: center;
  --drawer-cta-banner-w: min(15.2rem, calc(100% - 6.2rem));
  --drawer-cta-banner-ratio: 400 / 83;
}
.drawer-cta > a{
  justify-self: center;
}
.drawer-line-banner{
  width: var(--drawer-cta-banner-w);
  height: auto;
  aspect-ratio: var(--drawer-cta-banner-ratio);
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

.drawer-sale-banner-link{
  display: block;
}

.drawer-sale-banner{
  width: var(--drawer-cta-banner-w);
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.drawer-panel.zoom-in {
  transition: opacity .38s ease-out, transform .38s ease-out;
  transform-origin: top right;
}