@charset "UTF-8";

/* =========================================================
   基本（共通）
   ========================================================= */
.tabwap{
  max-width: calc(1300px + 4rem);
}

.tabbox{
  padding: 2em 1.5em;
  border: solid 2px #6091d3;
  border-radius: 10px;
  background-color: #ffffff;
}

.pwcn-tabs{ --pwcn-gap:.75rem; --pwcn-accent:#2684ff; }

.pwcn-tablist{
  display:flex;
  flex-wrap:wrap;
  gap:var(--pwcn-gap);
  align-items:center;
}

.mt-pc55{
  margin-top: 55px !important;
}

.top__sec0{
  position: relative;
  z-index: 1;
  margin-top: -100px;
}

@media (max-width: 769px){
.tabbox{
  padding: 1em;
}

.top__sec0{
  margin-top: -160px;
}

.mt-pc55 {
  margin-top: 0px !important;
}

}

/* タブのベース */
.pwcn-tab{
  appearance:none;
  background:#fff;
  border:1px solid #d8d8d8;
  padding:.5rem .9rem;
  border-radius:.6rem;
  cursor:pointer;
  font:inherit;
  line-height:1;
  transition:transform .15s ease,color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
  white-space:nowrap;
  display:flex; justify-content:center; align-items:center; width:100%;
}
.pwcn-tab:hover{ border-color:#bdbdbd; transform:translateY(-1px); }
.pwcn-tab:focus{ outline:2px solid color-mix(in srgb,var(--pwcn-accent) 20%,transparent); outline-offset:2px; }

.pwcn-tab.is-active,
.pwcn-tab[aria-selected="true"]{
  border-color:var(--pwcn-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pwcn-accent) 12%,transparent) inset;
}

/* パネル */
.pwcn-tabpanel{ margin-top:18px; }
.pwcn-tabpanel[hidden]{ display:none!important; }

/* =========================================================
   メインタブ（pills）：幅いっぱい均等配置
   ========================================================= */
.pwcn-tabs.is-variant-pills .pwcn-tablist{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px 16px;
  overflow:visible;
  padding-bottom:8px;
  margin-bottom:8px;
}
@media (max-width:1024px){
  .pwcn-tabs.is-variant-pills .pwcn-tablist{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .pwcn-tabs.is-variant-pills .pwcn-tablist{ grid-template-columns:repeat(2,1fr); }
}
.pwcn-tabs.is-variant-pills .pwcn-tab{
  border:1px solid #d8d8d8;
  background:#fff;
  color:#111;
  border-radius:9999px;
  min-height:60px;
  padding:10px 16px;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.pwcn-tabs.is-variant-pills .pwcn-tab.is-active,
.pwcn-tabs.is-variant-pills .pwcn-tab[aria-selected="true"]{
  background:var(--pwcn-accent);
  color:#fff;
  border-color:var(--pwcn-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pwcn-accent) 12%,transparent) inset;
}

/* =========================================================
   サブタブ（underline）
   ========================================================= */
.pwcn-tabs.is-variant-underline .pwcn-tablist{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px 22px;
  margin-bottom:14px;
}
@media (max-width:1024px){
  .pwcn-tabs.is-variant-underline .pwcn-tablist{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .pwcn-tabs.is-variant-underline .pwcn-tablist{ grid-template-columns:repeat(2,1fr); }
}
.pwcn-tabs.is-variant-underline .pwcn-tab{
  position:relative;
  border:1px solid #d8d8d8;
  background:transparent;
  color:#4b5563;
  padding:.6rem .5rem .8rem;
  line-height:1;
  border-radius:8px;
  font-weight:600;
  text-align:center;
}
.pwcn-tabs.is-variant-underline .pwcn-tab:hover{ background:#f3f6ff; color:#111; }

.pwcn-tabs.is-variant-underline .pwcn-tab.is-active,
.pwcn-tabs.is-variant-underline .pwcn-tab[aria-selected="true"]{
  color:#2684ff;
  background:transparent;
}
.pwcn-tabs.is-variant-underline .pwcn-tab.is-active::after,
.pwcn-tabs.is-variant-underline .pwcn-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  width:100%;
  height:3px;
  background:#2684ff;
  border-radius:2px;
}
.pwcn-tabs.is-variant-underline .pwcn-tab.is-active::before,
.pwcn-tabs.is-variant-underline .pwcn-tab[aria-selected="true"]::before{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid #2684ff;
}

/* =========================================================
   リンクカード（グリッド）
   ========================================================= */
.pwcn-linkgrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(230px,1fr));
  gap:20px;
  align-items:start;
}
@media (max-width:1024px){
  .pwcn-linkgrid{
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:10px;
  }
}
.pwcn-linkgrid .linkcard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  min-height:82px;
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  font-weight:600;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  background-color: #006dd208;
}
.pwcn-linkgrid .linkcard:hover{
  border-color:#c9c9c9;
  transform:translateY(-1px);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.pwcn-linkgrid .linkcard img{
  width:60px;
  height:60px;
  object-fit:contain;
  flex:0 0 40px;
}

@media (max-width: 640px){
.pwcn-linkgrid .linkcard{
  gap:5px;
  padding:5px;
}
}

/* =========================================================
   ボタン（共通）
   ========================================================= */
.pwcn-button{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:.6rem;
  background:var(--pwcn-accent);
  color:#fff;
  text-decoration:none;
  margin-right:.5rem;
  line-height:1.1;
  border:1px solid var(--pwcn-accent);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.pwcn-button:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.pwcn-button--ghost{ background:transparent; color:var(--pwcn-accent); border:1px solid var(--pwcn-accent); }
.pwcn-button--ghost:hover{ background:color-mix(in srgb,var(--pwcn-accent) 8%, #fff); }
.pwcn-button{ margin-top:.5rem; }
.pwcn-button + .pwcn-button{ margin-left:.5rem; }

/* =========================================================
   アクセシビリティ
   ========================================================= */
.pwcn-tab:focus-visible{
  outline:2px solid color-mix(in srgb,var(--pwcn-accent) 28%,transparent);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .pwcn-tab, .pwcn-linkgrid .linkcard, .pwcn-button{ transition:none; }
}

/* =========================================================
   CTAボタン（どの .pwcn-linkgrid でも使える）
   ※ 既存デザインに干渉しないよう、スコープを限定
   ========================================================= */
.pwcn-linkgrid .linkcard.cta-btn{
  border: none !important;
  background: transparent;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px !important;
  width: 100%;
  padding-inline: 16px;
  border-radius: 9999px !important;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  margin-top: 10px;
}
.pwcn-linkgrid .linkcard.cta-btn:not(.cta-btn--alt){
  background: linear-gradient(180deg,#58a8ff 0%,#2684ff 100%);
}
.pwcn-linkgrid .linkcard.cta-btn.cta-btn--alt{
  background: linear-gradient(180deg,#2ad5d5 0%,#12a7a7 100%);
}
.pwcn-linkgrid .linkcard.cta-btn::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: .4rem;
  opacity: .92;
}
.pwcn-linkgrid .linkcard.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.4);
  filter: saturate(1.05);
}
.pwcn-linkgrid .linkcard.cta-btn:focus-visible{
  outline: 3px solid #2684ff44; outline-offset: 3px;
}
/* CTA内の画像は非表示（万一入っても崩さない） */
.pwcn-linkgrid .linkcard.cta-btn img{ display:none !important; }

/* PC・SPでの列幅制御（グリッド内での挙動） */
@media (min-width: 1025px){
  .pwcn-linkgrid .linkcard.cta-btn{ grid-column: auto; }
}
@media (max-width: 1024px){
  .pwcn-linkgrid .linkcard.cta-btn{ grid-column: 1 / -1; }
}

/* CTAの任意改行（PCのみ2行に） */
.cta-btn__text { display: inline; }
.cta-btn__text > span { display: inline; }
@media (min-width: 1025px) {
  .cta-btn__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: center;
  }
  .cta-btn__text > span {
    display: block;
    white-space: nowrap;
  }
}

/* =========================================================
   特定タブ用背景（ミント）
   ========================================================= */
.pwcn-linkgrid--mint .linkcard{
  background-color: rgb(223, 248, 246) !important;
}
.pwcn-linkgrid--mint .linkcard:hover{
  background-color: rgb(205, 240, 238) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   「メーカーで探す」専用カード
   ※ CTA には適用しない
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pwcn-linkgrid--maker .linkcard:not(.cta-btn){
  display: flex;
  flex-direction: column;          /* ロゴ → テキスト縦並び */
  align-items: center;
  justify-content: center;
  text-align: center;

  /* min-height: 160px;
  padding: 18px 14px; */
  gap: 12px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  background-color: #006dd208;
}
.pwcn-linkgrid--maker .linkcard:not(.cta-btn):hover{
  transform: translateY(-2px);
  border-color: #d7dbe0;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ロゴだけを大きめに＆比率維持 */
.pwcn-linkgrid--maker .linkcard:not(.cta-btn) img{
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* スマホ・タブレット調整 */
@media (max-width: 1024px){
  .pwcn-linkgrid--maker .linkcard:not(.cta-btn){
    /* min-height: 140px; */
    padding: 16px 12px;
    gap: 10px;
  }
  .pwcn-linkgrid--maker .linkcard:not(.cta-btn) img{
    max-width: 200px;
    /* height: 100px; */
  }
}
@media (max-width: 640px){
  .pwcn-linkgrid--maker .linkcard:not(.cta-btn){
    /* min-height: 128px; */
  }
  .pwcn-linkgrid--maker .linkcard:not(.cta-btn) img{
    max-width: 150px;
    /* height: 90px; */
  }
  .estimate_btn_add span{
  font-size: 16px !important;
  }
}

/* =========================================================
   スマホ時：タブ（メイン／サブ）を横スクロールに
   ※ HTML変更不要。既存のgrid指定を上書きします。
   ========================================================= */
@media (max-width: 1024px) {
  /* タブリストを横一列＋スクロールに */
  .pwcn-tabs.is-variant-pills .pwcn-tablist,
  .pwcn-tabs.is-variant-underline .pwcn-tablist{
    display: flex !important;      /* grid → flex */
    flex-wrap: nowrap !important;  /* 折り返さない */
    gap: 10px !important;
    overflow-x: auto;               /* 横スクロール */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;  /* スナップ（ゆるめ） */
    padding: 0px 12px;              /* 左右に余白 */
    margin: 0 -12px 0px;           /* 画面端まで引き伸ばし */
  }

  /* 各タブは内容に応じた横幅で固定（等幅を解除） */
  .pwcn-tab{
    width: auto !important;
    flex: 0 0 auto;                 /* 折り返し防止 */
    white-space: nowrap;
    scroll-snap-align: start;       /* 先頭で止まりやすく */
  }

  /* サブタブ（underline）は、スクロール時も見やすいよう軽めに */
  .pwcn-tabs.is-variant-underline .pwcn-tab{
    border: 1px solid #e5e5e5;      /* 角丸チップの輪郭を残す */
    background: #fff;
  }

  /* スクロールバーの見た目（必要なら調整・削除OK） */
  .pwcn-tabs .pwcn-tablist::-webkit-scrollbar{ height: 6px; }
  .pwcn-tabs .pwcn-tablist::-webkit-scrollbar-thumb{
    background: #e5e5e5; border-radius: 6px;
  }
  .pwcn-tabs .pwcn-tablist{ scrollbar-width: thin; }
}

/* =========================================================
   SP時：タブ内スクロール＋左右固定ボタン（各タブブロック内のみ）
   ========================================================= */
@media (max-width: 1024px){
  /* ラッパー（ボタン左右固定／中にスクロール領域） */
  .pwcn-scrollwrap{
    display: grid;
    grid-template-columns: 36px 1fr 36px; /* 左ボタン | スクロール | 右ボタン */
    align-items: center;
    column-gap: 8px;
    margin-bottom: 10px; /* 既存UIとの余白 */
  }

  /* スクロール領域（中に .pwcn-tablist を入れる） */
  .pwcn-scrollarea{
    overflow: hidden;             /* はみ出し非表示（影だけ見せたい時は調整） */
    position: relative;
  }

  /* タブリストは横スクロール */
  .pwcn-scrollarea .pwcn-tablist{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .pwcn-scrollarea .pwcn-tablist::-webkit-scrollbar{ display: none; }

  /* 各タブを横並び＆中央寄せ */
  .pwcn-scrollarea .pwcn-tab{
    flex: 0 0 auto;
    scroll-snap-align: center;
    white-space: nowrap;
  }

  /* 左右ボタン（タブブロック内で固定表示） */
  .pwcn-scrollbtn{
    width: 24px; height: 24px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: transform .15s ease, opacity .15s ease;
  }
  .pwcn-scrollbtn:active{ transform: scale(.92); }
  .pwcn-scrollbtn[disabled]{ opacity:.3; pointer-events:none; }

  /* 矢印アイコン */
  .pwcn-scrollbtn::before{
    content: "";
    width: 8px; height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    display: block;
  }
  .pwcn-scrollbtn--right::before{ transform: rotate(135deg); } /* ＞ */
  .pwcn-scrollbtn--left::before{  transform: rotate(-45deg); } /* ＜ */
}

/* トップページスライダー PC表示を維持したいブレークポイントに合わせて調整 */
@media (min-width: 1025px) {
  /* スライダー外枠～トラックまで高さを固定 */
  .top__mv,
  .top__mv .topSwiper,
  .top__mv .topSlick,
  .top__mv .slick-list,
  .top__mv .slick-track {
    height: 380px !important; /* ← お望みの固定高に */
  }

  /* スライド1枚分の箱を固定高に */
  .top__mv .slick-slide {
    width: 960px !important;
    height: 380px !important;
    position: relative;        /* 子を absolute で全面フィットさせるため */
    overflow: hidden;          /* はみ出しカット */
  }

  /* picture/img を“全面にベタッ”と固定する */
  .top__mv .slick-slide > div,
  .top__mv .slick-slide picture,
  .top__mv .slick-slide img {
    position: absolute !important;
    inset: 0 !important;       /* top:0; right:0; bottom:0; left:0 */
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* 画像はトリミングして中央表示（比率バラバラでも高さは不変） */
  .top__mv .slick-slide img {
    object-fit: cover !important;
    object-position: center;
    /* グローバルの max-width/height:auto を無効化 */
    max-width: none !important;
  }

  /* picture のすき間対策 */
  .top__mv .slick-slide picture { line-height: 0; }
}

  /* tabコンテンツ以下 */
.bg-bl{
    background-color: #e5f9f8 !important;
    padding: 30px 0px !important;
}

.top_box_sec1 h2{
    color: #00579c;
    font-weight: 700;
    text-align: center;
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.top_box_sec1 wrapper{
    max-width: calc(1100px + 4rem);
}

.top_box_sec1 .content ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2.6rem;
}

.top_box_sec2 .content ul {
    gap: 1.6rem !important;
}

.top_box_sec1 .content ul li{
    max-width: none;
    width: calc((100% - 8rem) / 4);
}

.top_box_sec2 .content ul li {
    width: calc((100% - 8rem) / 6) !important;
}

.top_box_sec1 .content ul li a p{
    font-size: 1.8rem;
    padding-bottom: 2rem;
}

@media (max-width: 640px) {
.top_box_sec1 h2{
    font-size: 1.8rem;
}

.top_box_sec1 .content ul {
    gap: 1rem !important;
}

.top_box_sec1 .content ul li {
    width: calc((100% - 2rem) / 3) !important;
    display: flex;
    max-width: 11.5rem;
}

.top_box_sec1 .content ul li a p {
    font-size: 1.4rem;
    padding-bottom: 0.3rem;
    line-height: 1.6;
}
}

.box2-top{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 横並びを中央寄せ */
  gap: 14px;
}
.box2-top > div{
  flex: 0 1 340px; /* 2つで中央・ほどよい最大幅 */
}
.box2-top a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  border-radius: 9999px;
}

.btn-bl{
  background: linear-gradient(180deg, rgb(0, 157, 255) 0%, rgb(0, 109, 210) 100%) !important;
}

.btn-bl:hover{
  background: #fff !important;
  color: #006dd2 !important;
  border-color: #006dd2 !important;
}

.top_bt a{
  height: 6rem !important;
}


@media (max-width: 640px){
  .box2-top > div{ flex-basis: 100%; } /* 1列 */
}


/* スライダー本体を基準にする */
.topSlick {
  position: relative;
}

/* 共通の矢印スタイル */
.topSlick .slick-prev,
.topSlick .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45); /* 半透明の黒丸 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 中の「<」「>」 */
.topSlick .slick-prev::before,
.topSlick .slick-next::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* 左矢印 */
.topSlick .slick-prev {
  left: 200px;               /* 画像の内側に寄せる量 */
}
.topSlick .slick-prev::before {
  transform: rotate(-135deg);
}

/* 右矢印 */
.topSlick .slick-next {
  right: 200px;
}
.topSlick .slick-next::before {
  transform: rotate(45deg);
}

/* ホバー（PC用お好みで） */
@media (hover: hover) {
  .topSlick .slick-prev:hover,
  .topSlick .slick-next:hover {
    background: rgba(0, 0, 0, 0.65);
  }
}

/* スマホ・タブレットで少し内側＆少し小さく */
@media (max-width: 768px) {
  .topSlick .slick-prev,
  .topSlick .slick-next {
    width: 36px;
    height: 36px;
  }
  .topSlick .slick-prev { left: 8px; }
  .topSlick .slick-next { right: 8px; }
	
.topSlick .slick-prev,
.topSlick .slick-next {
  top: 30%;
}
	
}