@charset "UTF-8";

/* Component
---------------------- */

@media screen and (min-width: 768px) {
  .c-pc-none {
    display: none;
  }
}

.gothic {
  font-family: "Helvetica Neue", Arial, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}


@media screen and (max-width: 767px) {
  .fxw {
    display: flex;
    flex-wrap: wrap;
  }
}


/* 全体のレイアウト
---------------------- */

#breadcrumb {
  margin-top: 0px;
}

#tblLayout{
  margin-top: 0px;
  @media screen and (min-width: 768px) {
    margin-top: 60px;
  }
}

#column-sidearea {
  width: 95%;
  margin: 10px auto;
  @media screen and (min-width: 768px) {
    width: 220px;
    margin: 40px 0 0 0px;
  }
}

img{
  width: 100%;
}


/* 記事ページ
---------------------- */
.post-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.column-category-badge{
  font-size: 12px;
  margin: 5px 0 10px 0;
  display: inline-block;
  padding: 7px 10px;
  color: #fff;
  font-weight: bold;
}

.column-category-badge[data="news"] {
  background-color: #dfbd33;
}
.column-category-badge[data="campaign"] {
  background-color: #d789d4;
}
.column-category-badge[data="product"] {
  background-color: #ff3d3d;
}
.column-category-badge[data="soda"] {
  background-color: #32b8df;
}
.column-category-badge[data="water"] {
  background-color: #77d0f9;
}
.column-category-badge[data="tea"] {
  background-color: #58bc1a;
}
.column-category-badge[data="sports"] {
  background-color: #3395bf;
}

.update-date{
  font-size: 10px;
  color: #ababab;
  @media screen and (min-width: 768px) {
    font-size: 14px;
  }
}

#page-title{
  padding: 0px 0px 10px 0;
  font-weight: bold;
}

#ldc-column-contents {
  width: 95%;
  margin: 10px auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 5px #d1d1d1;
  @media screen and (min-width: 768px) {
    margin: 10px 0 0 0;
    width: 97%;
  }
}

#upper-contents-area{
  img{
    width: 100%;
    height: auto;
  }
}

/* ボトムスエリア
---------------------- */
.post-ldc-writer {
  margin: 50px 0 30px;
  @media screen and (min-width: 768px) {
    display: flex;
  }
}
.post-ldc-logo {
  width: 60%;
  margin: auto;
  @media screen and (min-width: 768px) {
    width: 90%;
    margin-right: 20px;
  }
}

.post-ldc-name {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  @media screen and (min-width: 768px) {
    text-align: left;
  }
}



/* 記事装飾
---------------------- */

.bigtitle{
  color: #5ac1de;
  border-left: 4px #5ac1de solid;
  padding: 0px 5px 0px 8px;
  margin: 30px 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.subtitle{
  padding: 0 5px 3px 0;
  margin: 25px 0 7px;
  font-size: 14px;
  border-bottom: 1px dotted #333333;
  font-weight: bold;
}

.column-item{
  margin: 30px 0;
  a{
    text-decoration: underline;
  }
}

#toc-area{
  background: #E6F6FA;
  border: 1px solid #c6e5ed;
  width: 100%;
  border-radius: 10px;
  margin-top: 30px;
}
.toc-title{
  padding-top: 12px;
  text-align: center;
  font-weight: bold;
}
.toc-list{
  margin: 0;
  padding: 10px;
  font-size: 15px;
}
.toc-sub{
  padding-left: 30px;
}
.reference{
  margin-top: 30px;
}


/* コラム共通サイドエリアパーツ
---------------------- */
#column-sidearea{
  .side-wrap:not(:last-child) {
    margin-bottom: 30px;
  }
  .side-ttl{
    font-size: 16px;
    border-left: 5px solid #5ac1de;
    margin-bottom: 10px;
    padding-left: 10px;
    letter-spacing: 1px;
    color: #5ac1de;
    line-height: 1.4;
    font-weight: bold;
  }
  .news-arrival {
    li{
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    li:not(:last-child) {
      margin-bottom: 8px;
    }
    a{
      display: block;
      background: rgba(90, 193, 222, 0.15);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }
  }
  
  .news-arrival-ttl {
    font-size: 15px;
    line-height: 1.2;
    @media screen and (min-width: 768px) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
  .side-choose {
    a{
      padding: 14px 0 8px 20px;
      display: block;
      position: relative;
      border-bottom: 1px dashed #ababab;
    }
    a::before {
      font-size: 15px;
      content: '>';
      color: #ababab;
      position: absolute;
      left: 3px;
      top: 56%;
      transform: translateY(-50%);
    }
  }
}

/* ==================================================
   コラム一覧カード型 レスポンシブレイアウト
================================================== */

/* 1. 全体テーブルのスマホ1列化補正 */
@media screen and (max-width: 768px) {
  #tblLayout,
  #tblLayout > tbody,
  #tblLayout tr,
  #tblLayout tr> td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


.column-card-list{
  width: 97%;
  margin: 0px auto;
  @media screen and (min-width: 768px) {
    margin: 0px;
  }
}

/* 2. カード用グリッド（PC: 3列 / スマホ: 1列） */
.column-card-grid {
  display: grid;
  margin: 20px 0;
  grid-template-columns: 1fr;
  /* スマホは1列表示 */
  gap: 15px;

  @media screen and (min-width: 768px) {
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    /* PCは3列表示 */
  }
}

/* 3. カード要素のスタイル */
.column-card-item {
  display: flex;
  height: 100%;
}

.column-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.column-card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* サムネイル画像 */
.column-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 画像の縦横比を固定 */
  overflow: hidden;
  background-color: #f5f5f5;
}

.column-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに綺麗にトリミング */
  display: block;
}

/* カードテキスト部分 */
.column-card-body {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* カードタイトル */
.column-card-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  color: #333;
  /* 3行以上は「…」にする指定 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ==================================================
   特集ページカテゴリ一覧パーツ（BodyFeaturePageCategoryLinks.ascx）
================================================== */

/* パーツ全体の外枠 */
.feature-page-parts-category-links {
  margin-bottom: 25px;
  width: 100%;
  box-sizing: border-box;
}

/* カテゴリタイトル（スマホ基本） */
.feature-page-parts-category-links-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
  line-height: 1.3;
  @media screen and (min-width: 768px) {
    font-size: 22px;
  }
}

/* カテゴリ説明文（スマホ基本） */
.feature-page-parts-category-links-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* ボタン一覧リスト（スマホ基本：2列のグリッド配置） */
.feature-page-parts-category-links-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは綺麗な2列 */
  gap: 8px; /* ボタン同士の間隔 */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 97%;
  box-sizing: border-box;
  @media screen and (min-width: 768px) {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

.feature-page-parts-category-links-items li {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  @media screen and (min-width: 768px) {
    width: auto;
  }
}

/* カテゴリボタン（スマホ基本） */
.feature-page-parts-category-links-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 8px;
  margin: 0;
  font-size: 13px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
  @media screen and (min-width: 768px) {
    width: auto;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ホバー時 */
.feature-page-parts-category-links-item:hover {
  background-color: #f5f5f5;
  border-color: #aaa;
}

/* 選択中（Active）ボタンのスタイル */
.feature-page-parts-category-links-item.feature-page-parts-category-links-item-isactive {
  background-color: #5ac3e059;
  border-color: #5ac3e0b0;
  color: #2190af;
  pointer-events: none; /* 選択中はクリック不可 */
}

.pagelinks b {
  background: #5ac3e0;
}