@charset "UTF-8";
/* =====================================================
   Waibi child theme: appearance overrides only
   - Do NOT control columns/width/display for .itemwrap here.
   - Layout (columns) lives in css/common.css (production baseline).
   - Scope strictly to card UIs: News/Events/Topics, News list, Line up, Company cards.
===================================================== */

:root{
  --waibi-blue: #00266f;
  --waibi-link: #4885a2;
  --waibi-text: #111;
}

/* 変な改行や空pが混ざるケースの保険（会社案内TOP等） */
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap > br,
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap > p{
  display: none !important;
}

/* カード内のリンク装飾を整理（見た目のみ） */
#below :is(.news-all, .newswrap) .itemwrap .item a,
#below #contents.lineup .itemwrap .item a,
#below :is(.campany, .company, .inner.campany, .inner.company) .itemwrap .item a{
  text-decoration: none;
  color: inherit;
}

/* 画像のはみ出し抑制（見た目のみ） */
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap .item .img{
  overflow: hidden;
}

/* TOP Newsカード寄せ：タイトルとメタの文字サイズ感 */
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap .item .textbox .date,
#below :is(.news-all, .newswrap) .itemwrap .item .textbox time{
  font-size: 13px;
  line-height: 1.4;
  color: var(--waibi-blue);
}

/* タイトル */
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap .item .textbox .title,
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap .item .textbox h3,
#below :is(.news-all, .newswrap, #contents.lineup, .campany, .company, .inner.campany, .inner.company) .itemwrap .item .textbox h4{
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--waibi-text);
}

/* カテゴリ（タグ） */
#below :is(.news-all, .newswrap) .itemwrap .item .textbox .catlist li,
#below :is(.news-all, .newswrap) .itemwrap .item .textbox .catlist li a{
  font-size: 13px;
}

/* Home：バナーエリア 左の「●」(リストマーカー) を消す */
.home .home-banner ul,
.home .home-banner ol{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.home .home-banner li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.home .home-banner li::marker{ content: "" !important; }
.home .home-banner li::before{ content: none !important; }

/* =====================================================
   Company page cards (DOM: .itemwrap.col3 > .item)
   Scope: company only (inner.campany)
   Purpose: match Waibi "card" look (blue border + notch) and typography
===================================================== */

#below .inner.campany .itemwrap{
  gap: 30px;
}

#below .inner.campany .itemwrap .item{
  position: relative;
  background: #fff;
  border: 1px solid var(--waibi-blue, #002d6b);
  padding: 10px;
  box-sizing: border-box;
}

#below .inner.campany .itemwrap .item:after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:0;
  height:0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--waibi-blue, #002d6b) transparent;
}

#below .inner.campany .itemwrap .item img{
  display:block;
  width:100%;
  height:auto;
}

#below .inner.campany .itemwrap .item a{
  color: inherit;
  text-decoration: none;
}

#below .inner.campany .itemwrap .item a:hover{
  text-decoration: underline;
}

#below .inner.campany .itemwrap .item .ttl,
#below .inner.campany .itemwrap .item h3,
#below .inner.campany .itemwrap .item h4{
  font-size: 16px;
  line-height: 1.4;
  margin: 8px 0 2px;
  font-weight: 700;
}

#below .inner.campany .itemwrap .item .en,
#below .inner.campany .itemwrap .item .sub,
#below .inner.campany .itemwrap .item p{
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* =====================================================
   Accessibility: keep skip-link functional but not visible unless focused
===================================================== */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:10px;
  top:10px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:#fff;
  border:1px solid #002d6b;
  z-index:99999;
}


/* =====================================================
   Company cards: normalize caption vertical alignment
   - Fix: "Profile" card label sits higher than others
   Cause: mixed default margins / different DOM fragments per card
   Approach: make each card a flex column and push caption block to bottom
===================================================== */
#below .inner.campany .itemwrap .item{
  display: flex;
  flex-direction: column;
}

/* Remove default margins so cards align consistently */
#below .inner.campany .itemwrap .item h3,
#below .inner.campany .itemwrap .item h4,
#below .inner.campany .itemwrap .item p{
  margin: 0;
}

/* Ensure the first image/link area doesn't introduce stray whitespace */
#below .inner.campany .itemwrap .item img{
  display: block;
}

/* Push caption area to the bottom:
   - if the item has an inner wrapper, this still works because last-child gets auto top margin
*/
#below .inner.campany .itemwrap .item > :last-child{
  margin-top: auto;
}


/* =====================================================
   Company cards: prevent global link hover (red) from affecting titles
   - Global rule like "#below .post-body a:hover { color: #ec304d; }" can bleed into cards.
   - Keep Waibi card colors on hover.
===================================================== */
#below .inner.campany .company-cards a.item,
#below .inner.campany .company-cards a.item:visited{
  color: inherit;
  text-decoration: none;
}

#below .inner.campany .company-cards a.item:hover,
#below .inner.campany .company-cards a.item:focus{
  color: inherit;
  text-decoration: none;
}

/* Ensure inner text doesn't turn red */
#below .inner.campany .company-cards a.item:hover .text,
#below .inner.campany .company-cards a.item:focus .text,
#below .inner.campany .company-cards a.item:hover .date,
#below .inner.campany .company-cards a.item:focus .date{
  color: inherit;
}

/* Optional: subtle hover feedback without color change */
#below .inner.campany .company-cards a.item:hover{
  opacity: 0.98;
}


/* =====================================================
   Company cards: force 3 columns on PC (>=1100px)
   Why: base common.css has @media (max-width: 1100px) rules that can keep 2-col at exactly 1100px.
   This rule lives in style.css (loaded after common.css) and is scoped to company only.
===================================================== */
@media (min-width: 1100px){
  #below .inner.campany .company-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
  }
  #below .inner.campany .company-cards > a.item{
    width: calc(33.3333333333% - 10px) !important;
    margin-right: 15px !important;
    margin-bottom: 20px;
  }
  #below .inner.campany .company-cards > a.item:nth-child(3n){
    margin-right: 0 !important;
  }
}

/* Tablet: keep 2 columns below 1100px */
@media (max-width: 1099px){
  #below .inner.campany .company-cards > a.item{
    width: calc(50% - 10px) !important;
    margin-right: 20px !important;
  }
  #below .inner.campany .company-cards > a.item:nth-child(2n){
    margin-right: 0 !important;
  }
}


/* =====================================================
   Company cards (final): match News card frame/notch/typography
   - Uses the SAME notch SVG as production common.css (.newswrap .itemwrap .item:before)
   - Scoped to company only: #below .inner.campany .company-cards
===================================================== */

/* Hard reset to avoid remnants from earlier experiments */
#below .inner.campany .company-cards > a.item {
  background-image: none !important;
  background: #fff !important;
  clip-path: none !important;
}
#below .inner.campany .company-cards > a.item::before,
#below .inner.campany .company-cards > a.item::after {
  content: none !important;
  display: none !important;
}

/* Frame (same as news card) */
#below .inner.campany .company-cards > a.item {
  position: relative !important;
  margin-bottom: 20px !important;
  padding: 10px !important;
  border: 1px solid #00266f !important;
  text-align: left !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Notch (exact) */
#below .inner.campany .company-cards > a.item:before {
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  z-index: 9999 !important;
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D.cls-2%7Bfill%3A%231b2f5c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%E3%82%A2%E3%83%BC%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89%201%3C%2Ftitle%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%221%201%2057.59%201%201%2057.59%201%201%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M55.17%2C2%2C2%2C55.17V2H55.17M60%2C0H0V60L60%2C0Z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-position: right bottom !important;
  background-size: 30px 30px !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  pointer-events: none !important;
}

/* Inner blocks */
#below .inner.campany .company-cards > a.item .img {
  margin-bottom: 10px !important;
}
#below .inner.campany .company-cards > a.item .img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
#below .inner.campany .company-cards > a.item .textbox {
  padding-right: 20px !important;
  width: 100% !important;
  line-height: 1.6 !important;
}
#below .inner.campany .company-cards > a.item .textbox .text {
  display: block !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #00266f !important;
}
#below .inner.campany .company-cards > a.item .textbox .date {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.75rem !important;
  color: #00266f !important;
}

/* Hover: keep colors (no red) */
#below .inner.campany .company-cards > a.item:hover,
#below .inner.campany .company-cards > a.item:focus {
  color: inherit !important;
  text-decoration: none !important;
}
#below .inner.campany .company-cards > a.item:hover .text,
#below .inner.campany .company-cards > a.item:hover .date {
  color: #00266f !important;
}


/* =====================================================
   Company cards: final normalization based on actual DOM
   DOM:
   <a class="item"><span.img><img>...</span><span.textbox><span.text><span.date></span.textbox></a>
   Goals:
   - Match News cards exactly: block-level card, consistent text box metrics, no inline baseline quirks
===================================================== */

/* Make card a block-level box (anchors are inline by default) */
#below .inner.campany .company-cards > a.item{
  display: block !important;
}

/* Ensure the image wrapper behaves like the news card .img block */
#below .inner.campany .company-cards > a.item > .img{
  display: block !important;
}

/* Textbox baseline alignment (avoid inline baseline affecting heights) */
#below .inner.campany .company-cards > a.item > .textbox{
  display: block !important;
}

/* Remove any accidental underline/border from inner spans */
#below .inner.campany .company-cards > a.item .text,
#below .inner.campany .company-cards > a.item .date{
  text-decoration: none !important;
  border-bottom: none !important;
}

/* =====================================================
   Link page: link item wrapping fix v1
   Target: /link/ only (.inner.linkpage)
   Purpose:
   - Keep each maker/link item together
   - Prevent odd breaks around parentheses and slashes
   - Do not change title, hero, sidebar, or global font sizes
===================================================== */

#below #contents .inner.linkpage .content ul{
  display: block !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  font-size: 0 !important;
}

#below #contents .inner.linkpage .content li{
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  vertical-align: top !important;
  margin: 0 28px 8px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#below #contents .inner.linkpage .content li::before{
  content: "・";
}

#below #contents .inner.linkpage .content li a,
#below #contents .inner.linkpage .content li span{
  display: inline !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#below #contents .inner.linkpage .content li br{
  display: none !important;
}

@media (max-width: 767px){
  #below #contents .inner.linkpage .content ul{
    font-size: inherit !important;
  }

  #below #contents .inner.linkpage .content li{
    display: block !important;
    white-space: normal !important;
    margin: 0 0 8px !important;
  }

  #below #contents .inner.linkpage .content li a,
  #below #contents .inner.linkpage .content li span{
    white-space: normal !important;
  }
}

/* =====================================================
   Link page: underline link targets v1
   Target: /link/ only (.inner.linkpage)
   Purpose:
   - Add underline only to clickable link text
   - Do not underline category headings or plain text
===================================================== */

#below #contents .inner.linkpage .content a{
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#below #contents .inner.linkpage .content a:hover,
#below #contents .inner.linkpage .content a:focus{
  text-decoration: underline !important;
}

/* =====================================================
   Products page: all title spacing v2
   Target: 商品案内ページのみ
   Purpose:
   - 「- 商品案内 - / Line up」の上下余白を広げる
   - 「■ 和以美オリジナル商品」など各セクションタイトルの上下余白を広げる
   - 商品カード自体には触らない
===================================================== */

/* Main page title: - 商品案内 - / Line up */
body.page-template-products #contents > .inner > header,
body.page-template-products-php #contents > .inner > header,
#below #contents .inner.lineup > header,
#below #contents .inner.cardwrap > header{
  margin-top: 32px !important;
  margin-bottom: 38px !important;
}

body.page-template-products #contents h1.title,
body.page-template-products-php #contents h1.title,
#below #contents .inner.lineup h1.title,
#below #contents .inner.cardwrap h1.title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Section titles: ■ 和以美オリジナル商品 etc. */
body.page-template-products #contents .content > h2,
body.page-template-products-php #contents .content > h2,
#below #contents .inner.lineup .content > h2,
#below #contents .inner.cardwrap .content > h2{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}

/* If section titles are wrapped in common heading classes */
body.page-template-products #contents .content > .heading,
body.page-template-products-php #contents .content > .heading,
#below #contents .inner.lineup .content > .heading,
#below #contents .inner.cardwrap .content > .heading{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}

/* =====================================================
   Lower pages: common title spacing v1
   Target: information / company / link
   Purpose:
   - 商品案内ページと同じ方向で、各ページタイトル周りの上下余白を広げる
   - 各セクション見出しの上下余白も少し広げる
   - カード・本文レイアウトには触らない
===================================================== */

/* Main page title: information / company / link */
#below #contents .inner.news > header,
#below #contents .inner.newswrap > header,
#below #contents .inner.campany > header,
#below #contents .inner.company > header,
#below #contents .inner.linkpage > header{
  margin-top: 32px !important;
  margin-bottom: 38px !important;
}

#below #contents .inner.news h1.title,
#below #contents .inner.newswrap h1.title,
#below #contents .inner.campany h1.title,
#below #contents .inner.company h1.title,
#below #contents .inner.linkpage h1.title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Section titles inside content */
#below #contents .inner.news .content > h2,
#below #contents .inner.news .content > h3,
#below #contents .inner.newswrap .content > h2,
#below #contents .inner.newswrap .content > h3,
#below #contents .inner.campany .content > h2,
#below #contents .inner.campany .content > h3,
#below #contents .inner.company .content > h2,
#below #contents .inner.company .content > h3,
#below #contents .inner.linkpage .content > h2,
#below #contents .inner.linkpage .content > h3{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}

/* Wrapped heading blocks, if present */
#below #contents .inner.news .content > .heading,
#below #contents .inner.newswrap .content > .heading,
#below #contents .inner.campany .content > .heading,
#below #contents .inner.company .content > .heading,
#below #contents .inner.linkpage .content > .heading{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}

/* =====================================================
   Privacy pages: title spacing with page class v2
   Target: privacy-policy / privacy-policy2
   Requirement: page.php adds .inner.privacy
   Purpose:
   - 商品案内・会社案内・リンクと同じ方向で、タイトル上下の余白を広げる
   - 本文や画像レイアウトには触らない
===================================================== */

/* Main page title */
#below #contents .inner.privacy > header{
  margin-top: 32px !important;
  margin-bottom: 38px !important;
}

#below #contents .inner.privacy h1.title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Content section headings */
#below #contents .inner.privacy .content > h2,
#below #contents .inner.privacy .content > h3{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}

/* =====================================================
   Sitewide font size adjustment v1
   Target: whole site
   Purpose:
   - Base font size: 18px -> 16px
   - Affects rem-based text: global nav, page titles, body text, sidebar, etc.
   - Fixed px card rules already adjusted separately are kept as-is
===================================================== */

html,
body{
  font-size: 16px !important;
}

/* =====================================================
   Home and Information title font alignment v1
   Target: TOP page / information page
   Purpose:
   - TOPページとinformationページのタイトル文字を他の下層ページタイトルに寄せる
   - 余白・カードレイアウト・本文には触らない
===================================================== */

/* TOP page section titles */
.home #contents h1.title,
.home #contents h2.title,
.home #contents h3.title,
.home .title,
.home .ttl,
.home .heading h2,
.home .heading h3{
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif !important;
  font-weight: 700 !important;
  color: var(--waibi-blue, #00266f) !important;
}

/* Information page main title */
#below #contents .inner.news h1.title,
#below #contents .inner.newswrap h1.title{
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif !important;
  font-weight: 700 !important;
  color: var(--waibi-blue, #00266f) !important;
}

/* Information page section/card titles */
#below #contents .inner.news .content h2,
#below #contents .inner.news .content h3,
#below #contents .inner.newswrap .content h2,
#below #contents .inner.newswrap .content h3,
#below #contents .inner.news .itemwrap .item .textbox .title,
#below #contents .inner.news .itemwrap .item .textbox h3,
#below #contents .inner.newswrap .itemwrap .item .textbox .title,
#below #contents .inner.newswrap .itemwrap .item .textbox h3{
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif !important;
  font-weight: 700 !important;
  color: var(--waibi-blue, #00266f) !important;
}

/* =====================================================
   Information cards: fixed height like TOP v3
   Target: /information/ only
   Purpose:
   - information の記事カード枠の高さを 480px に固定
   - TOPページのカードには触らない
   - 右下の切り欠き表示を保つため、カード本体は overflow:hidden にしない
   - 画像エリアだけを枠内でトリミングする
===================================================== */

#below #contents .inner.news .itemwrap.col3 > a,
#below #contents .inner.newswrap .itemwrap.col3 > a{
  display: block !important;
}

#below #contents .inner.news .itemwrap.col3 > a > .item,
#below #contents .inner.newswrap .itemwrap.col3 > a > .item,
#below #contents .inner.news .itemwrap.col3 > .item,
#below #contents .inner.newswrap .itemwrap.col3 > .item{
  height: 480px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 右下の切り欠き（三角）を既存デザインのまま表示 */
#below #contents .inner.news .itemwrap.col3 > a > .item::before,
#below #contents .inner.newswrap .itemwrap.col3 > a > .item::before,
#below #contents .inner.news .itemwrap.col3 > .item::before,
#below #contents .inner.newswrap .itemwrap.col3 > .item::before{
  display: block !important;
}

#below #contents .inner.news .itemwrap.col3 .item .img,
#below #contents .inner.newswrap .itemwrap.col3 .item .img{
  height: 250px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

#below #contents .inner.news .itemwrap.col3 .item .img img,
#below #contents .inner.newswrap .itemwrap.col3 .item .img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#below #contents .inner.news .itemwrap.col3 .item .textbox,
#below #contents .inner.newswrap .itemwrap.col3 .item .textbox{
  line-height: 1.45 !important;
}

#below #contents .inner.news .itemwrap.col3 .item .textbox .text,
#below #contents .inner.news .itemwrap.col3 .item .textbox .title,
#below #contents .inner.news .itemwrap.col3 .item .textbox h3,
#below #contents .inner.newswrap .itemwrap.col3 .item .textbox .text,
#below #contents .inner.newswrap .itemwrap.col3 .item .textbox .title,
#below #contents .inner.newswrap .itemwrap.col3 .item .textbox h3{
  line-height: 1.35 !important;
}

#below #contents .inner.news .itemwrap.col3 .item .textbox .catlist,
#below #contents .inner.newswrap .itemwrap.col3 .item .textbox .catlist{
  margin-top: 6px !important;
}

/* =====================================================
   Contact page: title spacing v1
   Target: /contact/
   Purpose:
   - 他の下層ページと同じ方向で、タイトル上下の余白を広げる
   - フォーム・本文・レイアウトには触らない
===================================================== */

#below #contents .inner.contact > header{
  margin-top: 32px !important;
  margin-bottom: 38px !important;
}

#below #contents .inner.contact h1.title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#below #contents .inner.contact .content > h2,
#below #contents .inner.contact .content > h3,
#below #contents .inner.contact .content > .heading{
  margin-top: 34px !important;
  margin-bottom: 28px !important;
}