@charset "UTF-8";
/* 共通CSS: 以前は各ページの<style>に直書き（54ページで共通） */

/* ---- style#menu-products-widen-fix ---- */

@media (min-width: 769px){
  .menu-group--products{grid-column:span 2;}
}


/* ---- style#menu-width-balance-20260908 ---- */

/* MENU内の横幅とカード比率を整理 */
@media (min-width: 1001px){
  .site-menu > .container.site-menu__inner{
    width:min(1080px, calc(100% - 64px)) !important;
    max-width:1080px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .site-menu__grid{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:12px;
  }

  .site-menu__grid > .menu-group{
    grid-column:span 4;
  }

  /* 01 : 02 を 5 : 7 にして、製品紹介の横幅を少し抑える */
  .site-menu__grid > .menu-group:first-child{
    grid-column:span 5;
  }

  .site-menu__grid > .menu-group--products{
    grid-column:span 7 !important;
  }

  .site-menu__grid > .menu-group--shop{
    grid-column:1 / -1;
  }

  .site-menu .menu-group--shop .menu-shop-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
  }

  .menu-group summary{
    padding-left:20px;
    padding-right:20px;
  }

  .menu-group__links{
    padding-left:20px;
    padding-right:20px;
  }
}

@media (min-width: 769px) and (max-width: 1000px){
  .site-menu > .container.site-menu__inner{
    width:min(920px, calc(100% - 48px)) !important;
  }

  .site-menu__grid > .menu-group--shop{
    grid-column:1 / -1;
  }

  .site-menu .menu-group--shop .menu-shop-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}


/* ---- style#menu-products-inner-2col-20260908 ---- */

/* 02 製品紹介：PCではジャンルを2列×2段で配置 */
@media (min-width: 1001px){
  .site-menu .menu-group--products .menu-group__links--products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 12px;
  }

  .site-menu .menu-group--products .mobile-product-group{
    height:100%;
  }
}


/* ---- style#menu-final-polish-20260908 ---- */

/* ===== MENU 完成版：情報量・余白・高さの最終バランス ===== */
@media (min-width:1001px){
  .site-menu > .container.site-menu__inner{
    width:min(1080px, calc(100% - 64px)) !important;
    max-width:1080px !important;
    padding:32px 0 42px !important;
  }

  .site-menu__intro{
    margin-bottom:22px !important;
    gap:34px;
  }
  .site-menu__intro p{
    max-width:390px;
    line-height:1.72;
  }

  .site-menu__grid{
    grid-template-columns:repeat(12, minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch;
  }
  .site-menu__grid > .menu-group{
    grid-column:span 4;
  }
  .site-menu__grid > .menu-group:first-child{
    grid-column:span 5;
  }
  .site-menu__grid > .menu-group--products{
    grid-column:span 7 !important;
  }
  .site-menu__grid > .menu-group--shop{
    grid-column:1 / -1 !important;
  }

  .site-menu .menu-group{
    box-shadow:0 9px 22px rgba(13,52,84,.05) !important;
  }
  .site-menu .menu-group summary{
    min-height:62px;
    padding:15px 19px !important;
  }
  .site-menu .menu-group__links{
    padding-left:19px !important;
    padding-right:19px !important;
    padding-bottom:17px !important;
  }
  .site-menu .menu-group__links > a{
    min-height:39px;
    font-size:.83rem;
  }

  /* 02 製品紹介：5:7の広さを活かし、4カテゴリを均等に配置 */
  .site-menu .menu-group--products{
    display:flex;
    flex-direction:column;
  }
  .site-menu .menu-group--products .menu-group__links--products{
    flex:1;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:9px 11px !important;
    padding:0 18px 17px !important;
  }
  .site-menu .menu-group--products .mobile-product-group{
    height:100%;
    min-height:0;
    padding:10px 12px 9px;
    background:#f8fbfd;
    border:1px solid #dce9f1;
    display:flex;
    flex-direction:column;
  }
  .site-menu .menu-group--products .mobile-product-parent{
    padding:1px 0 7px;
    margin:0;
    font-size:.77rem;
    line-height:1.45;
    letter-spacing:.01em;
  }
  .site-menu .menu-group--products .mobile-product-group a,
  .site-menu .menu-group--products .mobile-product-pending{
    min-height:31px;
    padding:5px 0;
    font-size:.77rem;
    line-height:1.4;
  }

  /* 03〜05：中段は同じ幅・同じ見出し密度で揃える */
  .site-menu__grid > .menu-group:nth-child(3),
  .site-menu__grid > .menu-group:nth-child(4),
  .site-menu__grid > .menu-group:nth-child(5){
    min-height:0;
  }

  /* 06 Shop：全幅だが高さは抑え、4販売元を一目で比較できるように */
  .site-menu .menu-group--shop summary{
    min-height:56px;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
  .site-menu .menu-group--shop .menu-shop-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:9px !important;
    padding:0 18px 15px !important;
  }
  .site-menu .menu-group--shop .menu-shop-link{
    min-height:52px !important;
    padding:7px 12px !important;
    border-radius:3px !important;
  }
  .site-menu .menu-group--shop .menu-shop-link img{
    max-width:142px;
    max-height:37px;
  }

  /* 最下部CTA：MENU本体より主張しすぎない高さに */
  .site-menu__actions{
    grid-template-columns:1.2fr 1.2fr 1fr !important;
    gap:12px !important;
    margin-top:12px !important;
  }
  .site-menu__actions .site-menu-action{
    min-height:76px !important;
    padding:16px 20px !important;
  }
  .site-menu__actions .site-menu-action strong{
    font-size:.94rem;
  }
  .site-menu__actions .site-menu-action small{
    margin-top:3px;
    font-size:.69rem;
    line-height:1.45;
  }
}

/* タブレット：従来の2列を維持しつつShopだけ全幅 */
@media (min-width:769px) and (max-width:1000px){
  .site-menu > .container.site-menu__inner{
    width:min(920px, calc(100% - 48px)) !important;
    padding-top:30px;
    padding-bottom:40px;
  }
  .site-menu__grid{
    gap:11px;
  }
  .site-menu__grid > .menu-group--products{
    grid-column:auto !important;
  }
  .site-menu__grid > .menu-group--shop{
    grid-column:1 / -1 !important;
  }
  .site-menu .menu-group--shop .menu-shop-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* スマホ：既存のアコーディオン1列を優先 */
@media (max-width:768px){
  .site-menu .menu-group--products{
    display:block;
  }
  .site-menu .menu-group--products .menu-group__links--products{
    grid-template-columns:1fr !important;
  }
  .site-menu .menu-group--products .mobile-product-group{
    height:auto;
  }
}


/* ---- style#header-notebook-shortlabels-final-20260908 ---- */

/* ===== ノートPC：1段のままラベルだけ短縮 ===== */
.nav-label-short{display:none;}

@media (min-width:1161px) and (max-width:1440px){
  body{padding-top:0 !important;}
  .site-header{top:0 !important; margin-top:0 !important;}

  .site-header .container.header-inner{
    max-width:100% !important;
    height:72px !important;
    padding:0 20px !important;
    display:flex !important;
    align-items:center !important;
    gap:clamp(12px,1.25vw,18px) !important;
  }

  .site-header .logo{
    flex:0 0 auto !important;
    gap:12px !important;
  }
  .site-header .logo .mark{
    width:32px !important;
    height:32px !important;
  }
  .site-header .logo .word{
    font-size:1.05rem !important;
    line-height:1.2 !important;
  }
  .site-header .logo .word span{
    font-size:.62rem !important;
    letter-spacing:.18em !important;
  }

  .site-header .primary-nav{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .site-header .primary-nav > ul{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:clamp(10px,1.05vw,16px) !important;
  }
  .site-header .primary-nav > ul > li,
  .site-header .primary-nav > ul > li.nav-notebook-secondary{
    display:block !important;
    flex:none !important;
  }
  .site-header .primary-nav > ul > li > a{
    min-height:72px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    text-align:center !important;
    line-height:1.2 !important;
    font-size:clamp(.76rem,.82vw,.82rem) !important;
    letter-spacing:0 !important;
  }
  .site-header .primary-nav > ul > li > a::after{
    bottom:10px !important;
  }

  .site-header .nav-label-full{display:none !important;}
  .site-header .nav-label-short{display:inline !important;}
  .site-header .nav-dropdown--usecases > .nav-dropdown__trigger{
    align-items:center !important;
  }
  .site-header .nav-dropdown--usecases .nav-label-short{
    position:relative !important;
    top:1px !important;
    line-height:1.2 !important;
  }

  .site-header .header-actions{
    flex:0 0 auto !important;
    margin:0 !important;
    gap:8px !important;
  }
  .site-header .contact-qa-stack{
    display:flex !important;
    width:106px !important;
    flex:0 0 106px !important;
  }
  .site-header .header-shop{
    min-height:40px !important;
    padding:8px 11px !important;
    font-size:.78rem !important;
  }
  .site-header .menu-toggle{
    min-width:82px !important;
    height:40px !important;
    padding:0 11px !important;
  }

  .site-menu{top:72px !important;}
  .site-menu::before{inset:72px 0 0 !important;}
  .hero-slider{height:100vh !important; min-height:600px !important;}
}

/* 13インチ級：要素は消さず、余白だけ一段締める */
@media (min-width:1161px) and (max-width:1240px){
  .site-header .container.header-inner{
    padding-left:14px !important;
    padding-right:14px !important;
    gap:10px !important;
  }
  .site-header .primary-nav > ul{gap:8px !important;}
  .site-header .primary-nav > ul > li > a{font-size:.73rem !important;}
  .site-header .contact-qa-stack{
    width:96px !important;
    flex-basis:96px !important;
  }
  .site-header .header-shop{padding-left:9px !important; padding-right:9px !important;}
  .site-header .menu-toggle{min-width:76px !important; padding-left:9px !important; padding-right:9px !important;}
}


/* ---- style#header-notebook-actual-width-fix-20260908 ---- */

/* ===== 実際のノートPC幅（Windows拡大率を含む）：961〜1440px ===== */
@media (min-width:961px) and (max-width:1440px){
  body{padding-top:72px !important;}
  .site-header{position:fixed !important; top:0 !important; left:0 !important; right:0 !important; margin:0 !important;}

  .site-header .container.header-inner{
    max-width:100% !important;
    height:72px !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* ロゴは通常PCと同じ大きさ */
  .site-header .logo{
    flex:0 0 auto !important;
    gap:12px !important;
  }
  .site-header .logo .mark{
    width:32px !important;
    height:32px !important;
  }
  .site-header .logo .word{
    font-size:1.05rem !important;
    line-height:1.2 !important;
  }
  .site-header .logo .word span{
    font-size:.62rem !important;
    letter-spacing:.18em !important;
  }

  /* 1160px以下でも短縮ナビを維持 */
  .site-header .primary-nav{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .site-header .primary-nav > ul{
    width:100% !important;
    height:72px !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:clamp(5px,.65vw,10px) !important;
  }
  .site-header .primary-nav > ul > li,
  .site-header .primary-nav > ul > li.nav-notebook-secondary,
  .site-header .primary-nav > ul > li.nav-dropdown{
    display:flex !important;
    align-items:stretch !important;
    height:72px !important;
    flex:none !important;
  }
  .site-header .primary-nav > ul > li > a,
  .site-header .primary-nav > ul > li.nav-dropdown > a{
    position:relative !important;
    top:auto !important;
    transform:none !important;
    height:72px !important;
    min-height:72px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    text-align:center !important;
    line-height:1 !important;
    font-size:clamp(.70rem,.78vw,.82rem) !important;
    letter-spacing:0 !important;
  }
  .site-header .primary-nav > ul > li > a::after{bottom:10px !important;}
  .site-header .nav-label-full{display:none !important;}
  .site-header .nav-label-short{
    display:inline-flex !important;
    align-items:center !important;
    height:1em !important;
    line-height:1 !important;
    position:static !important;
    top:auto !important;
    transform:none !important;
  }

  /* 「用途・課題」だけ浮かないよう、他項目と完全に同じ基準線へ */
  .site-header .nav-dropdown--usecases > .nav-dropdown__trigger{
    height:72px !important;
    min-height:72px !important;
    align-items:center !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1 !important;
    top:auto !important;
    transform:none !important;
  }
  .site-header .nav-dropdown--usecases .nav-label-short{
    position:static !important;
    top:auto !important;
    margin:0 !important;
    transform:none !important;
    line-height:1 !important;
  }
  .site-header .nav-dropdown--usecases .nav-caret{
    margin-top:-1px !important;
  }

  .site-header .header-actions{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:6px !important;
  }
  .site-header .contact-qa-stack{
    display:flex !important;
    width:94px !important;
    flex:0 0 94px !important;
  }
  .site-header .contact_link,
  .site-header .qa_link{display:block !important;}
  .site-header .header-shop{
    min-height:40px !important;
    padding:8px 9px !important;
    font-size:.75rem !important;
  }
  .site-header .menu-toggle{
    min-width:74px !important;
    height:40px !important;
    padding:0 9px !important;
  }

  .site-menu{top:72px !important;}
  .site-menu::before{inset:72px 0 0 !important;}
}

/* かなり狭いノートPCでは、ロゴは維持したまま周囲の余白だけ圧縮 */
@media (min-width:961px) and (max-width:1100px){
  .site-header .container.header-inner{padding-left:10px !important; padding-right:10px !important; gap:7px !important;}
  .site-header .logo{gap:10px !important;}
  .site-header .primary-nav > ul{gap:4px !important;}
  .site-header .primary-nav > ul > li > a,
  .site-header .primary-nav > ul > li.nav-dropdown > a{font-size:.69rem !important; gap:4px !important;}
  .site-header .contact-qa-stack{width:86px !important; flex-basis:86px !important;}
  .site-header .contact_link a{font-size:9.5px !important;}
  .site-header .qa_link a{font-size:9px !important;}
  .site-header .header-shop{padding-left:7px !important; padding-right:7px !important; font-size:.72rem !important;}
  .site-header .menu-toggle{min-width:70px !important; padding-left:7px !important; padding-right:7px !important;}
}


/* ---- style#header-notebook-logo-usecase-finalfix-20260908 ---- */

/* ===== ノートPC最終補正：公式ロゴ本来のサイズ + 用途・課題の光学中央 ===== */
@media (min-width:961px) and (max-width:1440px){
  /* 公式ロゴは旧32pxマーク指定ではなく、本来の横長ロゴ寸法に戻す */
  .site-header .logo{
    gap:0 !important;
    flex:0 0 auto !important;
  }
  .site-header .logo .mark{
    width:250px !important;
    height:62px !important;
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
  }
  .site-header .logo .mark img{
    width:100% !important;
    height:auto !important;
    max-height:62px !important;
    object-fit:contain !important;
    object-position:left center !important;
    display:block !important;
  }
  .site-header .logo .word{
    display:none !important;
  }

  /* ナビ文字の縦中心を全項目で一本化 */
  .site-header .primary-nav > ul{
    align-items:center !important;
  }
  .site-header .primary-nav > ul > li,
  .site-header .primary-nav > ul > li.nav-dropdown{
    height:72px !important;
    display:flex !important;
    align-items:center !important;
  }
  .site-header .primary-nav > ul > li > a,
  .site-header .primary-nav > ul > li.nav-dropdown > a{
    height:72px !important;
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1 !important;
    top:auto !important;
    transform:none !important;
  }
  .site-header .nav-label-short{
    height:auto !important;
    min-height:0 !important;
    display:inline-block !important;
    line-height:1 !important;
    vertical-align:middle !important;
    position:static !important;
    top:auto !important;
    transform:none !important;
  }

  /* 用途・課題だけ矢印の旧translateを解除。文字と▼の中心を同じ線にする */
  .site-header .nav-dropdown--usecases > .nav-dropdown__trigger{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
  }
  .site-header .nav-dropdown--usecases .nav-label-short{
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
  }
  .site-header .nav-dropdown--usecases .nav-caret{
    position:relative !important;
    top:0 !important;
    margin:0 !important;
    transform:rotate(45deg) !important;
  }
  .site-header .nav-dropdown--usecases:hover .nav-caret,
  .site-header .nav-dropdown--usecases:focus-within .nav-caret{
    transform:rotate(225deg) !important;
  }
}

/* 元の公式ロゴのレスポンシブ寸法をそのまま復元 */
@media (min-width:1161px) and (max-width:1320px){
  .site-header .logo .mark{width:210px !important; height:62px !important;}
}
@media (min-width:961px) and (max-width:1160px){
  .site-header .logo .mark{width:190px !important; height:56px !important;}
  .site-header .logo .mark img{max-height:56px !important;}
}