@charset "utf-8";

/* =========================================================
   Smart-ponshibu (PCでスマホ画面+右パネル) 【上書き完成版：全コピペOK】
   - 右側：追従する “半透明の領域” をCSSだけで確保（ボタンは後で載せる想定）
   - スマホ枠：幅固定・角丸なし・一番上にくっつける
   - PC時：固定フッターメニューは出さない
   - 右が落ちそうな幅になったら通常（スマホ）表示へ戻す
   ========================================================= */

/* ついでに：pageTopのtypo修正（footer → bottom） */
.pageTop{ bottom: 0; }

/* 通常（スマホ/タブレット）は従来どおり */
.pcSide{ display:none; }

/* PC左ロゴは通常は非表示（スマホでは出さない） */
.pcLeft{
  display: none;
}



/* =========================================================
   Smart-ponshibu 発動
   ========================================================= */
@media screen and (min-width: 780px){

  :root{
    --railW: 220px;       /* ★左ロゴ欄の固定幅 */
    --phoneW: 520px;      /* スマホ表示の固定幅 */
    --sideW: 380px;       /* 右パネル幅 */
    --gapMin: 16px;
    --gapMax: 40px;
    --panelTop: 14px;
  }

 
/* =========================================================
   PC背景クロスフェード
   ========================================================= */
@media screen and (min-width: 780px){

  :root{
    --pcbgFade: 1200ms;
    --pcbgBlur: 10px;/* ぼかし量 */
  }
  body{
    background:#e9eef3;
  }

  .pcbgLayers{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events:none;
  }

  .pcbgLayer{
    position:absolute;
    inset:0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity var(--pcbgFade) ease;
    filter: blur(var(--pcbgBlur));
    transform: scale(1.06);
  }

  .pcbgLayer.isOn{
    opacity:1;
  }

  /* 中央スマホ枠 */
  #container{
    background:#fff;
  }
}


/*-------------------------------------------
  ★外枠：左寄せ固定
-------------------------------------------*/
  .spsLayout{
    min-height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 24px 40px;
    gap: clamp(var(--gapMin), 3vw, var(--gapMax));
    box-sizing: border-box;
  }
  
   /* ★PC左ロゴ欄（固定幅） */
  .pcLeft{
    display:block;
    width: var(--railW);
    flex: 0 0 var(--railW);
    position: sticky;
    top: var(--panelTop);
    align-self: flex-start;
    z-index: 30;
  }
  .pcLeft__inner{
    padding-top: 6px;
  }
  .pcLeft__logo{
    display:block;
  }
  .pcLeft__logo img{
    width: 100%;
    height: auto;
    display:block;
  }
  
  /* スマホ表示（中央の枠） */
  #container{
    width: var(--phoneW);
    max-width: var(--phoneW);
    background:#fff;
    /* ★角丸を復活させない */
    border-radius: 0 !important;
    overflow:hidden;
    box-shadow: 0 10px 18px rgba(0,0,0,.10);
  }
 /* 右パネル */
  .pcSide{
    width: var(--sideW);
    flex: 0 0 var(--sideW);
  }

 /* PC時：固定フッターメニューは出さない */
  #fixed-footer-menu{ display:none !important; }
}

  #container img{ max-width:100%; height:auto; }

  /* ハンバーガーメニューの全画面オーバーレイを“スマホ枠内”に */
  .menuBox{
    width: var(--phoneW);
    left: 50%;
    transform: translateX(-50%);
  }

  .breadcrumbs{ width: 100%; }


/* =========================================================
   右側パネル：追従（完成寄せ・切れない版）
========================================================= */

.pcSide{ display:none; }

/* 大きいPC：可変は余白だけ（幅固定は維持） */
@media screen and (min-width: 1400px){
  .spsLayout{
    gap: clamp(18px, 3.2vw, 56px);
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media screen and (min-width: 780px){

  .pcSide{
    display:block;
    width: var(--sideW);
    flex: 0 0 var(--sideW);
    position: sticky;
    top: var(--panelTop);
    align-self: flex-start;
    z-index: 50;
  }

  /* ★箱 */
  .pcSide__inner{
    width: 100%;
    box-sizing: border-box;
    padding: 18px 18px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-height: calc(100vh - (var(--panelTop) * 2));
    overflow: auto; 
  }

  /* スクロールバー見た目 */
  .pcSide__inner::-webkit-scrollbar{ width: 10px; }
  .pcSide__inner::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.15);
    border-radius: 999px;
  }

  /* タイトル行 */
  .pcSide__title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    margin: 2px 0 16px;
  }
  .pcSide__titleText{
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 18px;
    line-height: 1;
    color: #222;
    white-space: nowrap;
  }
  .pcSide__titleIcon{
    height: 22px;
    width: auto;
    flex: 0 0 auto;
    display:block;
  }

  /* バナー */
  .pcSide__banner{
    display:block;
    margin: 0 0 18px;
    text-decoration:none;
  }
  .pcSide__banner img{
    display:block;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .pcSide__banner:last-child{ margin-bottom: 0; }

  /* 以前の fixed 切替がある場合の保険 */
  body.spsFixedRight .pcSide{
    position: fixed;
    top: var(--panelTop);
    left: calc(50% + (var(--phoneW) / 2) + clamp(var(--gapMin), 3vw, var(--gapMax)));
  }
}


/* =========================
   右パネル hover
   ========================= */

.pcSide__banner img{
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* hover */
.pcSide__banner:hover img{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  filter: brightness(1.03);
}

/* 押した時 */
.pcSide__banner:active img{
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}


/* =========================================================
   780〜1179px：スマホ枠は固定のまま
   左ロゴ欄＋右パネルだけ “なめらかに” 細くする
   ========================================================= */
@media screen and (min-width: 780px) and (max-width: 1179px){

  :root{
    /* 780pxで最小、1179pxで通常に戻る（連続変化） */

    /* 左ロゴ欄：最小140px → 通常220px */
    --railW: clamp(140px, calc(140px + (100vw - 780px) * 0.200), 220px);

    /* 右パネル：最小260px → 通常380px */
    --sideW: clamp(260px, calc(260px + (100vw - 780px) * 0.300), 380px);

    /* すき間も少しだけ縮める（最小10 → 通常40） */
    --gapMax: clamp(10px, calc(10px + (100vw - 780px) * 0.075), 40px);
    --gapMin: 10px;
  }
}
@media screen and (min-width: 780px) and (max-width: 900px){
  .pcSide__inner{ padding: 12px; }
}


/* =========================================================
   各ページにあるSmart Slider 3 を
   「スマホ枠 (#container) 内」で正常表示させる
   - fullwidth(画面幅基準)で付く left/transform/margin/width を #container 内だけ 0 に戻す
   - #container 内の Smart Slider 3 全IDに対応
   - PCスマポンシブ表示専用（780px以上）
   ========================================================= */
@media screen and (min-width: 780px){

  /* 0) スマホ枠内は必ずクリップ */
  #container .n2-section-smartslider,
  #container .n2-ss-slider{
    overflow: hidden !important;
  }

  /* 1) fullwidthラッパーの “ズレ” */
  #container ss3-force-full-width,
  #container ss3-force-full-width > div,
  #container .n2-section-smartslider,
  #container .n2-ss-align,
  #container .n2-padding,
  #container [id^="n2-ss-"][id$="-align"],
  #container [id^="n2-ss-"]{
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) JSが付けるwidth + translateが入りやすい層を固定 */
  #container [id^="n2-ss-"] .n2-ss-slider-wrapper-inside,
  #container [id^="n2-ss-"] .n2-ss-slider-1,
  #container [id^="n2-ss-"] .n2-ss-slider-2,
  #container [id^="n2-ss-"] .n2-ss-slider-3,
  #container [id^="n2-ss-"] .n2-ss-slider-4,
  #container [id^="n2-ss-"] .n2-ss-slide-backgrounds{
    left: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) 画像は枠に合わせて中央トリミング（fill想定） */
  #container [id^="n2-ss-"] .n2-ss-slide-backgrounds,
  #container [id^="n2-ss-"] .n2-ss-slide-background,
  #container [id^="n2-ss-"] .n2-ss-slide-background-image{
    width: 100% !important;
    height: 100% !important;
  }

  #container [id^="n2-ss-"] .n2-ss-slide-background-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

}