/*==========================================================================
  1. 共通設定・CSS変数 (Variables & Base)
==========================================================================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------- 変数定義 --------------- */
:root {
  --base-width: clamp(350px, 90vw, 1280px);
  --gdac-green: rgba(24, 179, 56, 1);
  --gdac-green2: rgba(24, 179, 56, 0.2);
  --gdac-pink1: rgba(255, 109, 93, 1);
  --gdac-gray1: rgba(237, 235, 233, 1); /* 暖色グレー */
  --gdac-gray2: rgba(237, 225, 213, 1); /* 暖色グレー */
  --gdac-main-text: #212121;
  --gray-text1: rgba(255, 255, 255, 0.8);
  --gdac-white: #ffffff;
  --gray-border: #515151;
  --gray-border2: #ccc;
  --gray-border3: #999;
  --gray-color1: #f7f7f7;
  --gray-color2: #f7f2f2;
  --gray-color3: #f9f9f9;
  --link-blue: #065FD4;

  --mg-s3: clamp(0.063rem, 0.017rem + 0.23vw, 0.188rem); /* 1px-3px */
  --mg-s2: clamp(0.188rem, 0.142rem + 0.23vw, 0.313rem); /* 3px-5px */
  --mg-s: clamp(0.313rem, 0.267rem + 0.23vw, 0.438rem);   /* 5px-7px */
  --mg-ms: clamp(0.438rem, 0.392rem + 0.23vw, 0.563rem);  /* 7px-9px */
  --mg-ms2: clamp(0.563rem, 0.517rem + 0.23vw, 0.688rem); /* 9px-11px */
  --mg-m: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);    /* 15px-20px */
  --mg-l: clamp(1.563rem, 1.449rem + 0.57vw, 1.875rem);   /* 25px-30px */
  --mg-xl: clamp(2.5rem, 2.386rem + 0.57vw, 2.813rem);    /* 40px-45px */
  
  --fsize-bc: clamp(0.75rem, 0.727rem + 0.11vw, 0.813rem);   /* 12px-13px */
  --fsize-s: clamp(0.625rem, 0.58rem + 0.23vw, 0.75rem);     /* 10px-12px */
  --fsize-ms: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);   /* 12px-14px */
  --fsize-m2: clamp(0.813rem, 0.761rem + 0.22vw, 0.938rem);  /* 13px-15px */
  --fsize-m: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);        /* 14px-16px */
  --fsize-l: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);       /* 16px-18px */
  --fsize-xl: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);    /* 18px-20px */
  --fsize-x2l-2: clamp(1.188rem, 1.136rem + 0.22vw, 1.313rem); /* 19px-21px */
  --fsize-x2l: clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);  /* 20px-22px */
  --fsize-x3l: clamp(1.375rem, 1.33rem + 0.23vw, 1.5rem);   /* 22px-24px */
  --fsize-x4l: clamp(1.375rem, 1.33rem + 0.23vw, 1.5rem);   /* 24px-26px */
  --fsize-x5l: clamp(1.625rem, 1.58rem + 0.23vw, 1.75rem);  /* 26px-28px */
  --fsize-x6l: clamp(1.75rem, 1.705rem + 0.23vw, 1.875rem);  /* 28px-30px */
  --fsize-x7l: clamp(1.875rem, 1.83rem + 0.23vw, 2rem);      /* 30px-32px */
  --fsize-x8l: clamp(2rem, 1.955rem + 0.23vw, 2.125rem);     /* 32px-34px */
  --fsize-x9l: clamp(2.125rem, 2.08rem + 0.23vw, 2.25rem);   /* 34px-36px */
  --fsize-x12l: clamp(2.5rem, 2.455rem + 0.23vw, 2.625rem);  /* 40px-42px */
  --fsize-sub-h2: clamp(1.375rem, 1.33rem + 0.23vw, 1.5rem);/* 22px-24px */
  
  --hd-height: 80px;
  --hd-height2: 30px;
}

/* --------------- 基本スタイル・スクロール位置調整 --------------- */
html {
  scroll-padding-top: 130px;
  scroll-behavior: smooth;
}

.writingarea [id],
.main-content [id],
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 130px;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 90px;
  }
  .writingarea [id],
  .main-content [id],
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
    scroll-margin-top: 90px;
  }
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: var(--fsize-m);
  line-height: var(--fsize-xl);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  color: var(--gdac-main-text);
}

/* 汎用クラス */
.flexbox_just_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flexbox_just_center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flexbox_between {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

hgroup {
  margin: var(--mg-m);
}

.h2-center, .h3-center {
  display: grid;
  place-content: center;
  text-align: center;
  padding-top: var(--mg-l);
}

h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h2 {
  font-size: var(--fsize-sub-h2);
  line-height: var(--fsize-l);
}

h3 {
  font-size: var(--fsize-x2l);
  line-height: var(--fsize-l);
  padding-bottom: var(--mg-m);
}

h4, h5 {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x2l);
  padding-top: var(--mg-m);
  padding-bottom: var(--mg-s);
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.87);
}

a.link-border {
  color: #1558d6;
  border-bottom: 1px solid #1558d6;
}

a.link-border:hover {
  opacity: 0.6;
}

/* 基本のレスポンシブ画像設定 */
img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.prd-list-img {
  width: 100%;
  overflow: hidden;
}

.prd-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*==========================================================================
  2. 大枠レイアウト (Layout & Containers)
==========================================================================*/

.wrapper {
  width: var(--base-width);
  margin-inline: auto;
}

.container {
  display: flex;
  gap: var(--fsize-l);
  width: 100%;
}

.main-content {
  flex: 3;
  border-right: 1px dotted var(--gray-border);
  padding: var(--mg-l) var(--mg-l) var(--mg-xl) 0;
  min-width: 0;
}

.main-content-single {
  flex: 1;
  padding: var(--mg-l) 0 var(--mg-xl) 0;
  min-width: 0;
}

.sidebar {
  flex: 1;
  padding: var(--mg-l) 0 var(--mg-xl) 0;
}

.sidebar section {
  margin-top: var(--mg-xl);
}

.sidebar section:first-child {
  margin-top: 0;
}

.list-wrap {
  border-bottom: 1px dotted var(--gray-border);
  padding-top: var(--mg-m);
  padding-bottom: var(--mg-m);
}

@media (max-width: 1024px) {
  .container {
    flex-direction: column;
  }
  .main-content {
    border-right: none;
    padding: var(--mg-l) 0;
  }
  .sidebar section {
    margin-top: var(--mg-l);
  }
}

@media (max-width: 768px) {
  .container, .pd-clm2, .cnt-clm2, .sub-h2 {
    flex-direction: column;
  }
}


/*==========================================================================
  3. 共通コンポーネント (UI Components)
==========================================================================*/

/* --------------- 角丸ナビボタン --------------- */
.sub-h2 ul, .pd-header ul.prd-nav, .sub-pd-nav ul {
  display: flex;
  flex-wrap: wrap;
}

.sub-h2 ul {
  padding-left: var(--mg-m);
  margin: var(--mg-ms) 0;
}

.sub-h2 ul li, .pd-header ul.prd-nav li {
  text-align: center;
  display: flex;
  justify-content: center;
}

.sub-h2 ul li:first-child,
.sub-h2 ul li:first-child a,
.pd-header ul.prd-nav li:first-child {
  border-radius: 10px 0 0 10px;
}

.sub-h2 ul li:last-child,
.sub-h2 ul li:last-child a,
.pd-header ul.prd-nav li:last-child {
  border-radius: 0 10px 10px 0;
}

.sub-h2 ul li a, .pd-header ul.prd-nav li a {
  width: 100%;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
}

@media (max-width: 768px) {
  .sub-h2 ul {
    padding-left: 0;
  }
}

/* --------------- サブページ h2 見出し --------------- */
.sub-h2 {
  display: flex;
  align-items: center;
  border-bottom: 1px dotted var(--gray-border);
}

.sub-h2 h2 {
  padding: var(--mg-m) 0;
  line-height: var(--fsize-x6l);
}

.sub-h2 ul li {
  background: var(--gdac-green);
  border-left: 1px solid white;
}

.sub-h2 ul li a {
  padding: var(--fsize-s) var(--fsize-m);
  font-size: var(--fsize-ms);
  line-height: var(--fsize-l);
}

.sub-h2 ul li a:hover, .sub-h2 ul li a.selected {
  background: var(--gray-border);
}

@media (max-width: 768px) {
  .sub-h2 h2 {
    padding: var(--mg-m) 0 var(--mg-s);
  }
  .sub-h2 ul {
    justify-content: center;
    gap: var(--mg-s);
  }
  .sub-h2 ul li,
  .sub-h2 ul li:first-child,
  .sub-h2 ul li:first-child a,
  .sub-h2 ul li:last-child,
  .sub-h2 ul li:last-child a {
    border-radius: 8px;
  }
  .sub-h2 ul li a:hover, .sub-h2 ul li a.selected {
    background: var(--gray-border);
    border-radius: 8px;
  }
}

/* --------------- 見出し下の小ターム一覧 --------------- */
.sub-h2-btm {
  padding: var(--mg-ms) 0;
  border-bottom: 1px dotted var(--gray-border);
}

.child-term-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: var(--mg-ms);
}

.child-term-list .term-item {
  margin: 0;
  padding: 0;
}

.child-term-list .term-item a {
  display: inline-flex;
  align-items: center;
  padding: var(--mg-s) var(--mg-ms);
  font-size: var(--fsize-ms);
  line-height: 1.4;
}

.child-term-list .term-item a::before {
  content: "＞";
  margin-right: 6px;
  font-size: 0.8em;
}

.child-term-list .term-item.current-term a, .child-term-list .term-item a:hover {
  background-color: var(--gdac-gray1);
  border-radius: 8px;
}

/* --------------- カテゴリ・アイコンタグ --------------- */
ul.ico-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-s);
}

ul.ico-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.pd-list-txt ul.ico-list li,
.news-list-txt ul.ico-list li,
.aside-prd-txt ul.ico-list li,
.news-single-ttl ul.ico-list li,
.c-news-li-set ul.ico-list li {
  font-size: var(--mg-ms2);
  padding: var(--mg-s2) var(--mg-s);
}

.pd-header ul.ico-list {
  margin-top: var(--mg-ms);
}

.pd-header ul.ico-list li {
  font-size: var(--fsize-ms);
  padding: var(--mg-s) var(--mg-ms);
  line-height: var(--fsize-m);
}

@media screen and (max-width: 768px) {
  .pd-header ul.ico-list {
    justify-content: center;
  }
}

/* カラー指定 */
.ico-allegy { background: var(--gdac-pink1); color: white; }
.ico-halal { background: var(--gdac-green); color: white; }
.ico-7years { background: var(--gray-border); color: white; }
.ico-10years { background: var(--gdac-main-text); color: white; }
.ico-option { background: var(--gray-border3); color: white; }
.ico-service { background: var(--gdac-green); color: white; }
.ico-award { background: #b8860b; color: white; }
.ico-sponsorship { background: #1e90ff; color: white; }
.ico-csv { background: #6a5acd; color: white; }
.ico-media, .ico-media-event { background: #8b0000; color: white; }
.ico-arrangement-recipe { background: #e91e63; color: white; }
.ico-donation { background: #dc143c; color: white; }
.ico-news { background: #fa8072; color: white; }
.ico-topics { background: #ff6347; color: white; }
.ico-catalog { background: #696969; color: white; }
.ico-event { background: #00bfff; color: white; }
.ico-exhibition { background: #ff8c00; color: white; }
.ico-media-publish { background: #90992e; color: white; }
.ico-price { background: #2b5d8f; color: white; }
.ico-certification { background: #ff8c00; color: white; }
.ico-other-csv { background: #2b7e8f; color: white; }
.ico-exhibition-report { background: #20b2aa; color: white; }
.ico-seminar { background: #2e9975; color: white; }
.ico-others { background: #66421e; color: white; }
.ico-press { background: #55504c; color: white; }
.ico-set-only { background: #3c424d; color: white; }
.ico-pet-stock { background: #2d800d; color: white; }
.ico-jas { background: #558000; color: white; }

/* --------------- カード・フラグボックス --------------- */
.text-set {
  margin: var(--mg-l) var(--mg-m);
}

.cb5 .text-set {
  margin: var(--mg-m) var(--mg-ms);
}

ul.flag-box {
  margin-bottom: var(--mg-m);
}


/*==========================================================================
  4. 製品関連ページ (Products)
==========================================================================*/

/* --------------- 製品内ナビ --------------- */
.pd-header ul.prd-nav {
  width: 100%;
}

.pd-header ul.prd-nav li {
  width: calc(100% / 6);
  border-left: 1px white solid;
  background: var(--gdac-green);
}

.pd-header ul.prd-nav li:hover {
  background: var(--gray-border);
}

.pd-header ul.prd-nav li a {
  font-size: var(--fsize-m);
  line-height: var(--fsize-xl);
  padding: var(--mg-ms) 0;
}

@media (max-width: 768px) {
  .pd-header ul.prd-nav li {
    width: calc(100% / 3);
    border-bottom: 1px white solid;
  }
  .pd-header ul.prd-nav li:first-child,
  .pd-header ul.prd-nav li:last-child {
    border-radius: 0;
  }
}

/* --------------- 製品メインビジュアル・スペック --------------- */
.pd-clm2 {
  display: flex;
  gap: var(--mg-l);
  align-items: flex-start;
  width: 100%;
  padding: 0 0 var(--mg-l) 0;
}

.pd-clm-l {
  flex: 0.9;
  width: 0;
}

.pd-clm-l .mySwiper2 img {
  border: 1px solid var(--gray-border2);
  padding: var(--mg-l);
}

.pd-clm-r {
  flex: 1.1;
}

.pd-lead-tex {
  font-size: var(--fsize-l);
  line-height: var(--fsize-x5l);
}

.pd-clm-r h3 {
  margin-top: var(--mg-xl);
  font-size: var(--fsize-x7l);
  line-height: var(--fsize-x12l);
  padding-bottom: 0;
}

.pd-clm-r table {
  margin-top: var(--mg-xl);
  width: 100%;
  text-align: left;
}

.pd-clm-r table th, .pd-clm-r table td {
  border-bottom: 1px dotted var(--gray-border);
  padding: var(--mg-ms);
}

.pd-clm-r table th:first-of-type {
  width: 30%;
  font-weight: bold;
}

@media (max-width: 768px) {
  .pd-lead-tex {
    padding-bottom: var(--mg-m);
    border-bottom: 1px dotted var(--gray-border);
  }
  .pd-clm-r h3 {
    margin-top: var(--mg-l);
    font-size: var(--fsize-x4l);
    line-height: var(--fsize-x7l);
  }
  .pd-clm-l, .pd-clm-r {
    width: 100%;
  }
  .pd-clm-r {
    text-align: center;
  }
  .pd-clm-r table {
    margin-top: var(--mg-m);
    border-top: 4px solid var(--gdac-main-text);
  }
}

/* --------------- 製品コンテンツ --------------- */
.main-content .cnt-box {
  margin-bottom: var(--mg-xl);
}

.pd-list h3 {
  font-size: var(--fsize-x2l-2);
  line-height: var(--fsize-l);
  padding-bottom: var(--mg-ms2);
  margin-bottom: var(--mg-m);
  border-bottom: 2px solid var(--gray-border);
}

.cnt-box h4, .pd-list h4, .pd-list-group h3, .writingarea h4, .company-news-list h3 {
  font-size: var(--fsize-xl);
  line-height: var(--fsize-x2l);
  padding-top: var(--mg-l);
  padding-bottom: var(--mg-ms2);
  border-bottom: 2px solid var(--gdac-main-text);
  margin-bottom: var(--mg-m);
}

.cnt-box h5, .writingarea h5 {
  font-size: var(--fsize-l);
  line-height: var(--fsize-x3l);
  background: var(--gdac-gray1);
  border-left: 8px solid var(--gdac-green);
  padding: var(--mg-ms);
  font-weight: bold;
  margin: var(--mg-m) 0;
}

table.spec-table {
  width: 100%;
  text-align: left;
  margin-bottom: var(--mg-xl);
}

table.spec-table th, table.spec-table td {
  border: 1px solid var(--gray-border3);
  padding: var(--mg-ms);
}

table.spec-table th:first-of-type {
  width: 30%;
  background: var(--gray-color1);
  font-weight: bold;
}

.cnt-clm2 {
  display: flex;
  gap: var(--mg-xl);
}

.cnt-clm2-box {
  flex: 1;
}

p.cnt-copy {
  font-size: var(--fsize-x3l);
  line-height: var(--fsize-x8l);
  font-weight: bold;
  margin-bottom: var(--mg-l);
}

.pd-dl-img {
  text-align: center;
}

.pd-dl-img img {
  border: 1px solid var(--gray-border2);
  padding: var(--mg-ms);
  margin-bottom: var(--mg-ms);
  background: white;
}

@media (max-width: 768px) {
  .cnt-box h4, .pd-list h4, .pd-list-group h3, .writingarea h4, .company-news-list h3, .pd-list h3 {
    text-align: center;
  }
}

/* --------------- ECリンクボックス --------------- */
.ec-link-box {
  background: #f7f7f4;
  border-radius: var(--mg-ms2);
  padding: var(--mg-m);
  margin: var(--mg-l) 0;
  line-height: var(--fsize-x5l);
  border: 1px dotted var(--gdac-green);
}

.ec-link-box h4 {
  padding: 0 0 var(--mg-s);
  text-align: center;
  margin-bottom: var(--mg-ms2);
  border-bottom: var(--gdac-green) 3px solid;
}

.ec-link-box ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--mg-m);
}

.ec-link-box ul li {
  width: calc(100% / 3);
}

.ec-link-box ul li a {
  text-align: center;
  display: block;
  background: var(--gdac-green);
  color: white;
  border-radius: 10px;
  padding: var(--mg-s) var(--mg-ms);
  font-weight: bold;
  font-size: var(--fsize-m);
  line-height: var(--fsize-xl);
}

.ec-link-box ul li a:hover {
  background: var(--gray-border);
}

@media (max-width: 1024px) {
  .ec-link-box ul li {
    width: calc(100% / 2);
  }
}

@media (max-width: 768px) {
  .ec-link-box ul li {
    width: 100%;
  }
}

/* --------------- 製品一覧・ナビゲーション --------------- */
.sub-pd-nav {
  display: flex;
  align-items: center;
  background: var(--gdac-gray1);
  border-radius: 12px;
  margin-top: var(--mg-m);
}

.sub-pd-nav h3 {
  font-weight: bold;
  font-size: var(--fsize-xl);
  line-height: var(--fsize-x3l);
  padding: 0 0 0 var(--mg-m);
  width: 300px;
}

.sub-pd-nav ul {
  width: calc(100% - 300px);
}

.sub-pd-nav ul li {
  width: calc(100% / 6);
  text-align: center;
  border-left: 1px dotted var(--gray-border3);
  line-height: var(--fsize-x2l);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-pd-nav ul li:hover {
  background: var(--gdac-gray2);
}

.sub-pd-nav ul li a {
  font-weight: bold;
  font-size: var(--fsize-ms);
  line-height: var(--fsize-l);
  display: block;
  padding: var(--mg-ms) 0;
}

@media (max-width: 1280px) {
  .sub-pd-nav {
    flex-direction: column;
  }
  .sub-pd-nav h3 {
    padding: var(--mg-m);
    margin: 0;
    width: 100%;
    border-bottom: 1px dotted var(--gray-border3);
    text-align: center;
  }
  .sub-pd-nav ul {
    width: 100%;
    border-left: none;
  }
  .sub-pd-nav ul li {
    width: calc(100% / 6);
  }
  .sub-pd-nav ul li:first-child {
    border-left: none;
  }
}

@media (max-width: 768px) {
  .sub-pd-nav ul li {
    width: calc(100% / 3);
  }
  .sub-pd-nav ul li:nth-child(4n) {
    border-left: none;
  }
  .sub-pd-nav ul li:nth-child(n+4) {
    border-top: 1px dotted var(--gray-border3);
  }
  .pd-list-img { padding: var(--mg-ms); }
  .pd-list-tlt { font-size: var(--fsize-m); }
  .pd-list-info { padding: var(--mg-s); }
}

.pd-list {
  margin-bottom: var(--mg-l);
}

.pd-list-txt {
  margin-top: var(--mg-ms);
}

.pd-list-txt ul.ico-list {
  justify-content: center;
  margin-bottom: var(--mg-ms);
}

.news-list-txt ul.ico-list {
  margin-bottom: var(--mg-ms);
}

.pd-list-img {
  padding: var(--mg-s) var(--mg-l);
}

.pd-list-info {
  padding: var(--mg-s) var(--mg-m) var(--mg-m);
  text-align: center;
  font-weight: bold;
}

.pd-list-tlt {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x3l);
  padding-bottom: var(--mg-ms);
  margin-bottom: var(--mg-ms);
  border-bottom: 1px dotted var(--gray-border);
}

.pd-list-price {
  font-size: var(--fsize-m);
  font-weight: bold;
}

.pd-list-price span {
  font-weight: normal;
  font-size: var(--fsize-ms);
  margin-left: var(--mg-s);
}

.pd-list-num {
  margin-top: var(--mg-ms);
  font-size: var(--fsize-ms);
  font-weight: normal;
}

.pd-list-cal {
  font-size: var(--fsize-ms);
}

.pd-list-group {
  margin-bottom: var(--mg-m);
}

.pd-list-box {
  border: 1px solid var(--gray-border2);
  border-radius: 12px;
  margin: var(--mg-ms);
  padding: var(--mg-ms) var(--mg-s);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.pd-list-gp-img {
  width: 30%;
}

.pd-list-gp-txt {
  width: 70%;
  padding-top: var(--mg-ms2);
  padding-left: var(--mg-m);
}

.pd-list-gp-tlt {
  font-size: var(--fsize-xl);
  line-height: var(--fsize-x5l);
  font-weight: bold;
}

/* --------------- 製品グリッド・ダウンロードボックス --------------- */
ul.prd-box li a, ul.prd-dl-box li {
  padding: var(--mg-m);
  text-align: center;
  display: block;
}

ul.prd-dl-box li {
  margin-bottom: var(--mg-m);
}

ul.prd-dl-box li img {
  border: 1px solid var(--gray-border3);
}

ul.prd-box li a:hover {
  background: var(--gray-color1);
}

.prd-box .prd-list-tlt {
  font-size: var(--fsize-m2);
  line-height: var(--fsize-xl);
  padding-bottom: var(--mg-ms);
  margin-bottom: var(--mg-ms);
  border-bottom: 1px dotted var(--gray-border);
  font-weight: bold;
}

.prd-dl-box .prd-list-tlt {
  font-size: var(--fsize-ms);
  line-height: var(--fsize-l);
  padding-bottom: var(--mg-ms);
  margin-bottom: var(--mg-s);
  border-bottom: 1px dotted var(--gray-border);
  font-weight: bold;
}

.prd-dl-box .img-dl-meta {
  margin-bottom: var(--mg-ms);
  font-size: var(--fsize-s);
  line-height: var(--fsize-m);
}

.prd-dl-box .dl-btn {
  display: inline-block;
  width: 100%;
  padding: var(--mg-ms) 0;
  font-size: var(--fsize-ms);
  color: #fff;
  background-color: var(--gray-border);
  border-radius: 4px;
}

.prd-dl-box .dl-btn:hover {
  background: var(--gdac-green);
}

/* --------------- 多言語仕様書 --------------- */
.multilung-top p {
  padding: var(--mg-m);
}

table.nut-spec-table {
  width: 100%;
  text-align: left;
  margin-bottom: var(--mg-s);
}

table.nut-spec-table th {
  background: var(--gray-color1);
}

table.nut-spec-table th, table.nut-spec-table td {
  border: 1px solid var(--gray-border3);
  padding: var(--mg-ms);
}

table.nut-spec-table th:first-child {
  width: 17.27%;
  font-weight: bold;
}

table.nut-spec-table th:nth-child(n+2) {
  width: 11.8%;
  font-weight: bold;
}

ul.spec-list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: var(--mg-xl);
}

ul.spec-list li {
  line-height: var(--mg-l);
}


/*==========================================================================
  5. お知らせ・記事詳細 (News & Single Article)
==========================================================================*/

/* --------------- お知らせ詳細 (single) --------------- */
.news-single-ttlbox {
  display: flex;
  border-bottom: 1px dotted var(--gray-border);
  padding-bottom: var(--mg-m);
  margin-bottom: var(--mg-l);
}

.news-single-ttl {
  width: 70%;
  padding: 0 var(--mg-m) 0 0;
}

.news-single-ttl h3 {
  font-size: var(--fsize-x3l);
  line-height: var(--fsize-x6l);
  padding-bottom: var(--mg-m);
}

.news-single-ttl .date {
  font-size: var(--fsize-l);
  font-weight: bold;
}

.news-single-ttl ul.ico-list {
  margin-bottom: var(--mg-m);
}

.news-single-img {
  width: 30%;
}

.news-single-img img {
  border: 1px solid var(--gray-border3);
}

@media (max-width: 768px) {
  .news-single-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* --------------- 本文執筆エリア (.writingarea) --------------- */
.writingarea {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x4l);
  margin-bottom: var(--mg-xl);
}

.writingarea h3 {
  margin-top: var(--mg-l);
  line-height: var(--fsize-x6l);
}

@media (max-width: 768px) {
  .writingarea h3,
  .writingarea .sp-senter {
    text-align: center;
  }
}

.writingarea p {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x5l);
  margin-bottom: var(--mg-l);
}

.writingarea p.sub-title {
  font-size: var(--fsize-x4l);
  line-height: var(--fsize-x8l);
  font-weight: bold;
  padding-bottom: var(--mg-ms);
  border-bottom: 3px solid var(--gdac-green);
  color: var(--gdac-green);
}

.writingarea p.sub-title2 {
  font-size: var(--fsize-x4l);
  line-height: var(--fsize-x8l);
  font-weight: bold;
  padding-bottom: var(--mg-ms);
}

.writingarea p a, .writingarea table a, .writingarea .gray-box a, .c-newstlt {
  color: var(--link-blue);
  border-bottom: 1px solid var(--link-blue);
}

.writingarea .has-text-align-center {
  text-align: center;
}

.writingarea table {
  background: #fff;
}

.writingarea h6 {
  font-size: var(--fsize-l);
  line-height: var(--fsize-x2l);
  padding: var(--mg-m) var(--mg-ms2);
  margin-bottom: var(--mg-m);
  border-radius: 10px;
}

.writingarea .col3-mg-set p {
  margin-bottom: 0;
}

/* Gutenberg テーブル補正 */
.writingarea .wp-block-table {
  margin-bottom: var(--mg-m);
}

.writingarea .wp-block-table table {
  width: 100%;
}

.wp-block-table, 
.wp-block-table th, 
.wp-block-table td {
  border-color: var(--gray-border2) !important;
}

.wp-block-table th, 
.wp-block-table td {
  padding: var(--mg-ms);
}

.wp-block-table thead,
.wp-block-table th {
  border-bottom: 1px solid var(--gray-border2) !important;
}

.writingarea .wp-block-table th {
  background: #f0f0f0 !important;
}

/* グレーボックス枠群 */
.writingarea .gray-box {
  background: var(--gray-color3);
  border: 1px solid var(--gray-border2);
  padding: var(--mg-l);
  margin-bottom: var(--mg-l);
  line-height: var(--fsize-x5l);
}

.writingarea .gray-box h4 {
  font-size: var(--fsize-xl);
  line-height: var(--fsize-x3l);
  padding-top: 0;
  padding-bottom: var(--mg-m);
}

.writingarea .gray-box ul, .writingarea .gray-box-sponser ul {
  padding-left: var(--mg-m);
}

.writingarea .gray-box ul li, .writingarea .gray-box-sponser ul li {
  list-style-type: disc;
}

.writingarea .gray-box2 {
  background: var(--gray-color3);
  border: 1px solid var(--gray-border2);
  padding: var(--mg-l);
  margin-bottom: var(--mg-l);
}

.writingarea .gray-box-sponser {
  background: #f7f7f4;
  border-radius: var(--mg-ms2);
  padding: var(--mg-l);
  margin-bottom: var(--mg-l);
  line-height: var(--fsize-x5l);
}

.writingarea .gray-box-sponser h4 {
  color: var(--gdac-green);
  border-bottom: 3px solid var(--gdac-green);
}

.writingarea .gray-box-media, .writingarea .gray-box-media2 {
  padding: 0;
  margin-bottom: var(--mg-m);
}

.writingarea .gray-box-price {
  padding: 0;
}

.writingarea .gray-box-price-title {
  background: #fee1e5;
  border: 1px solid #ee7893;
  padding: var(--mg-l);
  margin-bottom: var(--mg-m);
  line-height: var(--fsize-xl);
}

.writingarea .gray-box-price-title .large-tex {
  font-size: var(--fsize-x3l);
  line-height: var(--fsize-xl);
  margin-bottom: var(--mg-l);
}

.writingarea .gray-box-price-title p {
  line-height: var(--fsize-xl);
  margin-bottom: 0;
}

.writingarea .gray-box-media .wp-block-table,
.writingarea .gray-box-media .wp-block-table td,
.writingarea .gray-box-media2 .wp-block-table,
.writingarea .gray-box-media2 .wp-block-table td {
  border: none !important;
}

.writingarea .gray-box-media .wp-block-table td {
  border-bottom: 1px dotted var(--gray-border) !important;
}

.writingarea .gray-box-media2 .wp-block-table td {
  border-bottom: 1px solid var(--gray-border2) !important;
}

.writingarea .gray-box-media table td:first-child {
  width: 20%;
  color: var(--gdac-green);
  font-weight: bold;
  border-bottom: 1px dotted var(--gdac-green) !important;
}

.writingarea .gray-box-media2 table td:first-child {
  width: 20%;
  font-weight: bold;
  border-bottom: 1px solid var(--gdac-main-text) !important;
}

.writingarea .gray-box-price table td:first-child,
.writingarea .gray-box-price table th:first-child {
  width: 70%;
}

.writingarea .gray-box-price table td:nth-child(2) {
  text-align: center;
  background: var(--gray-color3);
}

.writingarea .gray-box-price table td:last-child {
  font-weight: bold;
  text-align: center;
}

/* 注意書き・お問い合わせボタン */
.news-caution-box, .company-query-box {
  background: var(--gray-color3);
  padding: var(--mg-l);
  text-align: center;
  border-top: 1px dotted var(--gray-border);
}

.news-caution-box p, .company-query-box p {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x3l);
  margin-bottom: var(--mg-l);
}

.center-btn {
  display: flex;
  justify-content: center;
}

.center-btn a, p.center-btn a {
  background: var(--gdac-green);
  border-radius: 10px;
  color: white;
  padding: var(--mg-ms2) var(--mg-l);
  font-weight: bold;
}

.center-btn a:hover {
  background: var(--gray-border);
}

.wp-block-columns {
  margin-bottom: var(--mg-l);
}

.wp-element-caption {
  text-align: center;
  font-size: var(--fsize-m2);
  line-height: var(--fsize-x2l);
  margin-top: var(--mg-ms);
}

.gray-border {
  border: 1px solid var(--gray-border3);
}

.donation-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-m);
  margin-bottom: var(--mg-l);
}

.donation-list li {
  border: 1px solid #dde8e2;
  border-radius: var(--mg-ms);
  padding: var(--mg-m);
}

/* --------------- お知らせ一覧 (Archive) --------------- */
ul.news-box li a {
  padding: var(--mg-m);
  display: flex;
}

ul.news-box li a:hover {
  background: var(--gray-color1);
}

.news-box .news-list-tlt {
  font-size: var(--fsize-m);
  line-height: var(--fsize-x2l);
  padding-bottom: var(--mg-ms);
  margin-bottom: var(--mg-ms);
  font-weight: bold;
}

ul.news-box li a .news-list-img {
  width: 30%;
}

ul.news-box li a .news-list-img img {
  border: 1px solid var(--gray-border3);
}

ul.news-box li a .news-list-txt {
  width: 70%;
  padding-left: var(--mg-m);
}

.news-list-date {
  font-size: var(--fsize-l);
  font-weight: bold;
  margin-bottom: var(--mg-ms2);
  padding-bottom: var(--mg-s2);
  border-bottom: 1px dotted var(--gray-border);
  display: block;
  width: 100%;
}

@media screen and (max-width: 768px) {
  ul.news-box li a {
    padding: var(--mg-s) 0;
  }
}

/* --------------- 目次 (TOC) --------------- */
#toc_container {
  display: block !important;
  width: 100% !important;
  margin: 0 auto var(--mg-l);
  font-size: var(--fsize-m);
  padding: var(--mg-m);
  border: 1px dotted var(--gray-border);
}

#toc_container p {
  padding-bottom: var(--mg-s);
}

#toc_container .toc_title {
  font-size: var(--fsize-m);
  font-weight: bold;
  color: #000;
  border-bottom: 1px dotted var(--gray-border);
}

#toc_container .toc_toggle a {
  color: var(--gdac-main-text);
}

#toc_container ul li {
  line-height: var(--fsize-x3l);
  margin: var(--mg-s) 0;
  font-weight: bold;
}

#toc_container ul li a {
  margin-top: 0;
  display: block;
  color: var(--gdac-main-text);
  text-decoration: none;
}

#toc_container ul li a:hover {
  color: var(--gdac-main-text);
  text-decoration: none;
}

#toc_container .toc_list > li > a {
  font-size: var(--fsize-ms);
  color: var(--link-blue);
}

#toc_container ul ul {
  margin-top: var(--mg-s);
}

#toc_container ul ul li {
  line-height: var(--fsize-xl);
  font-size: 100%;
  margin-left: 3%;
}

#toc_container ul li a:before,
#toc_container ul ul li a:before {
  content: "\03e";
  padding-right: 10px;
  padding-left: 5px;
}

#toc_container ul ul li a {
  color: #3d3d3d;
  font-weight: normal;
  padding-right: 6px;
  text-decoration: none;
}

#toc_container ul ul li a:hover {
  color: #F89174;
  text-decoration: none;
}


/*==========================================================================
  6. 会社情報・TOPページ (Company & Top Page)
==========================================================================*/

/* --------------- 会社情報 --------------- */
.company-archive-ttl h3 {
  font-size: var(--fsize-x2l);
  line-height: var(--fsize-x4l);
  background: var(--gdac-gray1);
  padding: var(--mg-l) var(--mg-m);
  margin-bottom: var(--mg-m);
}

.company-news-list ul li {
  padding: var(--mg-ms2) 0 var(--mg-ms);
  border-bottom: 1px dotted var(--gray-border);
}

.c-news-li-set {
  display: flex;
  align-items: center;
  gap: 15px;
}

.c-news-li-set .date {
  width: 90px;
}

.c-news-li-set .c-news-ico {
  margin-right: var(--mg-m);
  width: 120px;
}

.c-news-box {
  margin-bottom: var(--mg-m);
}

@media (max-width: 768px) {
  .c-news-li-set {
    display: block;
  }
  .c-news-li-set .date {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .c-news-li-set .c-news-ico {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin-right: 0;
  }
  .c-newstlt {
    display: table;
    margin-top: 8px;
  }
}

/* 会社概要ボックス */
ul.com-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-xl);
  margin: var(--mg-xl) 0;
}

ul.com-box li {
  width: calc((100% - var(--mg-xl)) / 2);
  padding: var(--mg-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-m);
  border: var(--gdac-green) solid 1px;
  border-radius: 20px;
}

ul.com-box li .ccl-img img {
  border-radius: 10px;
}

ul.com-box li .ccl-img {
  width: calc(30% + var(--mg-m));
}

ul.com-box li .ccl-tex {
  width: calc(65% - var(--mg-m));
}

ul.com-box li .ccl-tex .ccl-en {
  color: var(--gdac-green);
  font-size: var(--fsize-m);
  margin-bottom: var(--mg-ms2);
}

ul.com-box li .ccl-tex h3 {
  font-size: var(--fsize-x2l);
  padding-bottom: var(--mg-ms2);
  border-bottom: var(--gray-border2) solid 1px;
  margin-bottom: var(--mg-m);
}

ul.com-box li .ccl-tex p {
  margin-bottom: var(--mg-m);
}

ul.com-box li .ccl-tex a {
  background: var(--gdac-green);
  color: white;
  font-weight: bold;
  padding: var(--mg-ms2) var(--mg-m);
  display: inline-block;
  border-radius: var(--mg-l);
}

ul.com-box li .ccl-tex a:hover {
  background: var(--gray-border);
}

@media screen and (max-width: 1024px) {
  ul.com-box {
    gap: var(--mg-m);
  }
  ul.com-box li {
    width: calc((100% - var(--mg-m)) / 2);
    border-radius: 14px;
  }
  ul.com-box li .ccl-img {
    width: calc(25% + var(--mg-m));
  }
  ul.com-box li .ccl-tex {
    width: calc(65% - var(--mg-m));
  }
}

@media screen and (max-width: 768px) {

  .company-archive-ttl h3 {
    text-align: center;
  }

  ul.com-box li {
    width: 100%;
    padding: var(--mg-m);
  }
  ul.com-box li .ccl-img {
    width: calc(20% + var(--mg-m));
  }
  ul.com-box li .ccl-tex {
    width: calc(75% - var(--mg-m));
  }
}

/* --------------- TOPページ --------------- */
main section.top-first {
  min-height: 361px;
}

main section.top-first img {
  width: 100%;
  height: auto;
  aspect-ratio: 421 / 361;
}

.top-first {
  padding: calc(var(--mg-xl) * 2.5) 0 var(--mg-ms);
}

.top-banner {
  padding: var(--mg-xl) 0;
}

.top-h2-set {
  text-align: center;
  margin-bottom: var(--mg-m);
}

.top-h2-set h2 {
  margin-bottom: var(--mg-m);
}

ul.top-banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-m);
}

ul.top-banner-list li {
  width: calc((100% - (var(--mg-m) * 3)) / 4);
}

ul.top-banner-list li a img {
  width: 100%;
  border: #d6d6d6 solid 1px;
}

ul.top-banner-list li a:hover, ul.aside-banner li a:hover {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .top-first {
    padding: calc(var(--mg-xl) * 1.8) 0 var(--mg-ms);
  }
  ul.top-banner-list li {
    width: calc((100% - (var(--mg-m) * 1)) / 2);
  }
}


/*==========================================================================
  7. フォーム関連 (Contact Form 7)
==========================================================================*/

.center-contents {
  width: 80%;
  margin: 0 auto;
  padding: var(--mg-l);
}

@media (max-width: 1024px) {
  .center-contents {
    width: 100%;
    padding: var(--mg-l) 0 0;
  }
}

.wp-block-contact-form-7-contact-form-selector {
  width: 100%;
  margin: 0 auto;
}

.wpcf7-list-item {
  display: inline-block;
  margin: 0 var(--mg-s) 0 0;
}

.s2_contact {
  padding-bottom: 20px;
}

dl.contact7 {
  margin-bottom: 20px;
}

dl.contact7 > div {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px #515151 dotted;
}

dl.contact7 dt {
  width: 35%;
  padding: var(--mg-m);
  font-weight: bold;    
  border-bottom: 1px dotted var(--gray-border2);
}

dl.contact7 dt p,
dl.contact7 dd p {
  margin: 0;
  font-size: var(--fsize-m);
}

dl.contact7 dd {
  width: 65%;
  padding: var(--mg-m);
  border-bottom: 1px dotted var(--gray-border2);
}

@media (max-width: 768px) {
  dl.contact7 dt,
  dl.contact7 dd {
    width: 100%;
  }
  dl.contact7 dt {
    padding-bottom: 0;
  }
}

.contact7 .must, .contact7 .optional {
  color: var(--gdac-white);
  border-radius: 3px;
  font-size: var(--fsize-s);
  margin-left: var(--mg-m);
  padding: var(--mg-s) var(--mg-m);
  letter-spacing: 2px;
}

.contact7 .must {
  background: var(--gdac-pink1);
}

.contact7 .optional {
  background: var(--gray-border);
}

.wpcf7-form-control-wrap {
  position: relative;
}

.c7_center {
  text-align: center;
}

.c7_center p {
  margin-bottom: 0;
}

.c7_center p a {
  display: block;
  width: 250px;
  margin: 20px auto;
  border: 1px var(--gray-border) solid;
  padding: var(--mg-s) var(--mg-m);
  text-align: center;
  color: var(--gdac-main-text);  
}

.c7_center a:hover {
  background: var(--gray-color3);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
  border: none;
  margin-top: 20px;
  border-top: 1px dotted var(--gray-border);
  padding: 20px 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  color: var(--gdac-pink1);
}

/* 送信ボタンの装飾 */
.s2_contact .c7_center input[type="submit"] {
  background: var(--gdac-green);
  border: none;
  border-radius: 10px;
  padding: var(--mg-ms2) var(--mg-l);
  font-size: var(--fsize-xl);
  font-weight: bold;
  color: white;
  cursor: pointer;
  font-family: 'Kosugi Maru', sans-serif;
  margin-top: 20px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.s2_contact .c7_center input[type="submit"]:hover {
  background: var(--gray-border);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.35);
}

.s2_contact .c7_center input[type="submit"]:active {
  transform: translateY(0);
}

.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: #23282d;
  opacity: 0.75;
  width: 0;
  height: 0;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

/* 入力フォームの装飾 */
.s2_contact dd input[type="text"],
.s2_contact dd input[type="email"],
.s2_contact dd textarea {
  width: 100%;
  padding: var(--mg-ms2);
  font-size: var(--fsize-m);
  background-color: var(--gray-color3);
  border: 1px solid var(--gray-border2);
  border-radius: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
}

.s2_contact dd input[type="text"]:focus,
.s2_contact dd input[type="email"]:focus,
.s2_contact dd textarea:focus {
  background-color: #ffffff;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}


/*==========================================================================
  8. サイドバー (Sidebar)
==========================================================================*/

aside .cnt-box h4 {
  padding: 0 0 var(--mg-s) 0;
  margin: 0;
  border-bottom: 1px solid var(--gdac-main-text); 
}

@media (max-width: 1024px) {
  aside .cnt-box h4 {
    border-bottom: 2px solid var(--gdac-main-text); 
  }
}

@media (max-width: 768px) {
  aside .cnt-box h4 {
    font-size: var(--fsize-xl);
    line-height: var(--fsize-l);
    padding-top: var(--mg-l);
    padding-bottom: var(--mg-ms2);
    border-bottom: 2px solid var(--gdac-main-text);
    margin-bottom: var(--mg-m);
  }
}

/* --------------- 多言語仕様書リンク --------------- */
aside ul.lang-list li img {
  width: var(--mg-m);
  margin-right: var(--mg-s);
  border: 1px solid #eee;
}

aside ul.lang-list li a, aside .spec-aside-toplink a {
  padding: var(--mg-ms) 0;
  border-bottom: 1px dotted var(--gdac-main-text);
  display: flex;
  align-items: center;
}

aside ul.lang-list li a:hover, aside .spec-aside-toplink a:hover {
  background: var(--gray-color1);
}

aside .spec-aside-toplink a {
  margin-bottom: var(--mg-xl);
}

@media (max-width: 768px) {
  aside ul.lang-list li a, aside .spec-aside-toplink a {
    padding: var(--mg-m) 0;
  }   
  aside ul.lang-list li img {
    width: var(--mg-l);
  }
}

/* --------------- サイドバーお知らせ --------------- */
aside ul.cb-side-news {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-ms2);
  margin-top: var(--mg-m);
}

aside ul.cb-side-news li {
  width: 100%;
  padding: 0;
}

aside ul.cb-side-news li a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-ms);
}

aside ul.cb-side-news li a:hover {
  background: var(--gray-color1);
} 

aside .cb-side-news li a .aside-news-img {
  width: 80px;
}

aside .cb-side-news li a .aside-news-img img {
  border: 1px solid var(--gray-border3);
}

aside .cb-side-news li a .aside-news-txt, 
aside .cb-side-news li a .aside-prd-txt {
  width: calc(100% - (80px + var(--mg-ms)));
  font-size: var(--fsize-m2);
}

aside .cb-side-news li a .aside-prd-txt {
  line-height: var(--fsize-ms);
}

aside .cb-side-news .date {
  padding-bottom: var(--mg-s2);
  border-bottom: 1px dotted var(--gdac-main-text);
  margin-bottom: var(--mg-s);
  font-weight: bold;
  display: block;
  width: 100%;
}

aside .cb-side-news .newstlt {
  font-size: var(--fsize-m);
  line-height: var(--fsize-xl);
  margin-bottom: var(--mg-s2);
}

@media (max-width: 1024px) {
  aside ul.cb-side-news {
    gap: var(--mg-m);
    margin-top: var(--mg-m);
  }
  aside ul.cb-side-news li {
    width: calc((100% - var(--mg-m)) / 2);
  }
}

@media (max-width: 768px) {
  aside ul.cb-side-news {
    gap: var(--mg-m);
    margin-top: var(--mg-m);
  }
  aside ul.cb-side-news li {
    width: 100%;
  }
}

/* --------------- サイドバーおすすめ商品 --------------- */
.aside-prd-txt ul.ico-list li {
  width: initial;
}

.aside-prd-txt .pd-list-price {
  border-top: 1px dotted var(--gray-border);
  padding-top: var(--mg-ms);
  margin: var(--mg-s) 0 var(--mg-m);
}

/* --------------- サイドバーバナー --------------- */
ul.aside-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-ms);
}

ul.aside-banner li, ul.aside-banner li a {
  width: 100%;
}

ul.aside-banner li a img {
  border: #d6d6d6 solid 1px;
}

@media (max-width: 1024px) {
  ul.aside-banner li { 
    width: calc((100% - (3 * var(--mg-ms))) / 4);
  }
}

@media (max-width: 768px) {
  ul.aside-banner {
    gap: var(--mg-m);
  }
  ul.aside-banner li { 
    width: calc((100% - var(--mg-m)) / 2);
  }
}


/*==========================================================================
  9. ヘッダー・フッター (Header & Footer)
==========================================================================*/

/* --------------- ヘッダー部品 --------------- */
.header-company {
  width: 100%;
  height: var(--hd-height2);
  padding: var(--mg-s) 0;
  font-size: var(--fsize-ms);
}

.header-company .header-copy, .header-company a {
  color: var(--gdac-main-text);
}

ul.hdc-btn1, ul.hdc-btn2, ul.hdc-btn1 li {
  margin-left: var(--mg-m);
}

ul.hdc-btn1 li a:hover {
  color: var(--gdac-green);
}

ul.hdc-btn2 li {
  margin-left: var(--mg-s);
}

ul.hdc-btn2 li a {
  background: var(--gdac-gray1);
  padding: var(--mg-s2) var(--mg-m);
  font-size: var(--fsize-s);
  font-weight: bold;
  border-radius: 100vmax;
}

ul.hdc-btn2 li a.selected, ul.hdc-btn2 li a:hover {
  background: var(--gdac-main-text);
  color: white;
}

/* --------------- ヘッダー右上リンクのアイコン --------------- */
ul.hdc-btn1 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

ul.hdc-btn1 a::before {
  content: "▶";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--gdac-main-text);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  padding-left: 1px;
  flex-shrink: 0;
}

ul.hdc-btn1 a:hover::before {
  background-color: var(--gdac-green);
}

/* --------------- ナビゲーション・ハンバーガー --------------- */
header {
  display: block;
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 110px;
  background: var(--gdac-white);
}

.h-inner {
  margin: 0 auto;
  width: var(--base-width);
}

.header__inner {
  display: flex;
  align-items: center;
  height: 80px;
  padding: var(--mg-m) 0;
  background: var(--gdac-white);
  border-bottom: 1px dotted var(--gray-border);
}

.header__logo {
  width: 100%;
  max-width: 140px;
  margin: 10px auto 0;
}

.header__logo a {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
}

.header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--hd-height);
  height: 100%;
}

.header__nav {
  z-index: 10;
  position: absolute;
  top: 0;
  right: -100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.6s;
  margin-top: var(--hd-height);
}

.nav {
  padding: 0;
}

.nav__list {
  display: block;
  width: var(--base-width);
  padding: 0;
}

ul.nav__list li a {
  display: block;
  width: 100%;
  padding: 20px;
  text-align: center;
  font-size: var(--fsize-m);
  font-weight: bold;
  border-bottom: 1px dotted var(--gray-border);
}

ul.nav__list li a:hover, ul.nav__list li a.selected {
  color: var(--gdac-green);
}

.sp-only {
  width: var(--base-width);
  background: var(--gdac-green);
}

@media (min-width: 768px) and (max-width: 1024px) {
  ul.nav__list li a {
    padding: 20px 10px;
  }
  ul.nav__list li:first-child {
    display: none;
  }
}

@media (min-width: 768px) {
  .header__hamburger {
    display: none;
  }
  .header__nav {
    position: static;
    height: 100%;
    opacity: initial;
    align-items: flex-start;
    width: fit-content;
    justify-content: center;
    margin-top: 0;
  }
  .nav {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .nav__list {
    display: flex;
    padding-right: 0;
    width: 100%;
  }
  ul.nav__list li a {
    border-bottom: none;
  }
  .header__logo {
    width: 100%;
    max-width: 140px;
    margin: 0 var(--mg-m) 0 0;
  }
  .header__logo a {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .sp-only {
    display: none;
  }
}

.hamburger {
  width: inherit;
  height: var(--hd-height);
  margin: 0;
  cursor: pointer; 
  background-color: transparent;
  border: none;
  outline: none;
}

.hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 40px;
  height: 2px;
  transform: translateX(-50%);
  background: #515151;
  transition: all 0.4s;
}

.hamburger span:nth-of-type(1) { top: -10px; }
.hamburger span:nth-of-type(2) { top: 0; }
.hamburger span:nth-of-type(3) { top: 10px; }

.hamburger.is-active span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}

.hamburger.is-active span:nth-of-type(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}

.header__nav.is-active {
  position: fixed;
  top: 0;
  right: 0;
  background: white;
  opacity: 1;
  transition: 1s;
}

/* --------------- パンくずリスト --------------- */
.breadcrumb {
  padding: 120px 0 var(--mg-ms);
  font-size: var(--fsize-s);
  line-height: 20px;
  z-index: 9999;
  border-bottom: 1px var(--gray-border) dotted;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.breadcrumb li:not(:last-of-type)::after {
  content: ">";
  margin: 0 .6em;
  color: #777;
}

.breadcrumb li:last-child {
  color: var(--gdac-green);
  font-weight: bold;
}

.breadcrumb li a:hover {
  color: var(--gdac-green);
}

@media (max-width: 768px) {
  header {
    height: 80px;
  }
  .header-company {
    display: none;
  }
  .breadcrumb {
    padding-top: calc(80px + var(--mg-s)); 
    padding-bottom: var(--mg-s); 
  }
}

/* --------------- フッター --------------- */
.ft-green {
  background: var(--gdac-green);
  color: white;
  padding: var(--mg-xl) var(--mg-m) var(--mg-m);
}

.ft-logo img {
  width: 100%;
  max-width: 150px;
  margin: 0 0 var(--mg-m);
}

.ft-black {
  background: var(--gdac-main-text);
  color: var(--gray-text1);
}

.flex-block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ft-black-wrap {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

ul.ft-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: white;
  border-radius: 15px;
  font-weight: bold;
  padding: var(--mg-s) 0;
}

ul.ft-nav li {
  margin: 0 var(--mg-s);
}

ul.ft-nav li a {
  display: block;
  padding: var(--mg-ms) var(--mg-m);
}

ul.ft-nav li a.selected, ul.ft-nav li a:hover {
  background: var(--gdac-green);
  border-radius: 10px;
  color: white;
}

.ft-btn1, .ft-btn2 {
  margin: var(--mg-m) 0;
  font-weight: bold;
}

ul.ft-btn1 li { margin: 0 var(--mg-m); }
ul.ft-btn1 li a { color: white; }
ul.ft-btn1 li a:hover { opacity: 0.5; }

ul.ft-btn2 li a {
  padding: var(--mg-s2) var(--mg-m);
  border-radius: 100vmax;
  border: 1px solid white;
  color: white;
  margin: 0 var(--mg-s);
}

ul.ft-btn2 li a.selected, ul.ft-btn2 li a:hover {
  background: var(--gdac-main-text);
}

.ft-company-name {
  font-weight: bold;
  margin-right: var(--mg-l);
}

.ft-blk-right, .ft-company-name {
  display: flex;
  align-items: center;
}

.ft-blk-left ul {
  border-left: 1px solid var(--gray-text1);
}

.ft-blk-left ul li a {
  display: block;
  color: var(--gray-text1);
  padding: var(--mg-m);
  border-right: 1px solid var(--gray-text1);
  font-size: var(--fsize-ms);
}

.ft-blk-left ul li a:hover {
  background: var(--gray-border3);
}

.copyright {
  font-size: var(--fsize-ms);
}

@media (max-width: 1280px) {
  .ft-black-wrap { flex-flow: column; }
  .ft-blk-right { justify-content: center; }
  .ft-black { padding: 0 0 var(--mg-m); }
  .ft-blk-left { margin-bottom: var(--mg-ms); }
}

@media (max-width: 1024px) {
  .ft-company-name {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .ft-blk-left ul { margin: var(--mg-m) 0; }
  .ft-black { padding: var(--mg-l) 0; }
}

@media (max-width: 768px) {
  .ft-logo img { max-width: 120px; }
  ul.ft-nav { padding: var(--mg-s); }
  ul.ft-nav li {
    width: calc(50% - (var(--mg-s) * 2));
    padding: 0;
    margin: var(--mg-s);
  }
  ul.ft-nav li a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: var(--mg-m) var(--mg-m);
    background: var(--gdac-green2);
    border-radius: 10px;
  }
  .ft-blk-left { margin-bottom: 0; }
  .ft-blk-left, .ft-blk-left ul, .ft-blk-left ul li, .ft-blk-right {
    width: 100%;
    text-align: center;
  }
  .ft-blk-left ul {
    border-left: none;
    border-top: 1px dotted var(--gray-text1);
    margin: var(--mg-l) 0;
  }
  .ft-blk-left ul li a { 
    border-right: none;
    border-bottom: 1px dotted var(--gray-text1);
  }
}


/*==========================================================================
  10. プラグイン・モジュール・埋め込み (External Libraries & Embeds)
==========================================================================*/

/* --------------- Swiper 初期化前崩れ防止 --------------- */
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex !important;
  overflow: hidden !important;
}

.swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0 !important;
  max-height: 361px !important;
}

.swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+4) {
  display: none !important;
}

/* --------------- Swiper スライダー --------------- */
.pd-clm-l .swiper {
  width: 100%;
  height: 100%;
  --swiper-navigation-color: #888888; 
  --swiper-navigation-size: 20px;
}

.pd-clm-l .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  background-size: cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--mg-ms);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pd-clm-l .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: center;
}

.mySwiper2 {
  height: 80%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.company-mv-box .swiper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  --swiper-navigation-color: #888888; 
  --swiper-navigation-size: 20px;
}

.company-mv-box .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.company-mv-box a:hover {
  opacity: 0.7;
}

/* --------------- 多言語仕様書セレクトボックス --------------- */
.cnt-box#multilang {
  background-color: #f9f9f9;
  border: 10px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.cnt-box#multilang h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #333333;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #0056b3;
}

.spec-select-container {
  position: relative;
  width: 100%;
}

.spec-select-container::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666666;
  pointer-events: none;
}

#spec-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 12px 40px 12px 15px;
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

#spec-select:focus {
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

@media screen and (max-width: 768px) {
  .cnt-box#multilang {
    padding: 15px;
    margin: 15px auto;
  }
  #spec-select {
    padding: 14px 40px 14px 12px;
  }
}

/* --------------- ページネーション --------------- */
.nav-links {
  margin-bottom: var(--mg-l);
  display: flex;
  justify-content: center;
  background: #fff;
}

.nav-links a, .nav-links span {
  width: var(--fsize-x12l);
  height: var(--fsize-x12l);
  margin: 0;
  line-height: var(--fsize-x12l);
  text-align: center;
  font-size: var(--fsize-xl);
  color: #363636;
}

.nav-links a:hover, .nav-links .current {
  background: var(--gdac-green);
  color: #fff;
}

.dots {
  background: none;
}

.pagination .screen-reader-text,
.navigation .screen-reader-text {
  display: none;
}

/* --------------- YouTube・Google Map 埋め込み --------------- */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: var(--mg-l);
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
}

.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* --------------- カードグリッドレイアウト --------------- */
@media (min-width: 1280px) {
  ul.cb6 > li { width: calc(100% / 6); }
  ul.cb5 > li { width: calc(100% / 5); }
  ul.cb4 > li { width: calc(100% / 4); }
  ul.cb3 > li, ul.cb3-2 > li { width: calc(100% / 3); }
  ul.cb2 > li { width: calc(100% / 2); }
  ul.cb1 > li { width: calc(100% / 1); }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  ul.cb6 > li, ul.cb5 > li { width: calc(100% / 4); }
  ul.cb4 > li, ul.cb3 > li { width: calc(100% / 3); }    
  ul.cb2 > li, ul.cb3-2 > li { width: calc(100% / 2); }
  ul.cb1 > li { width: calc(100% / 1); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  ul.cb6 > li, ul.cb5 > li { width: calc(100% / 4); }
  ul.cb4 > li, ul.cb3 > li { width: calc(100% / 3); }    
  ul.cb2 > li, ul.cb-side > li, ul.cb3-2 > li { width: calc(100% / 2); }
  ul.cb1 > li { width: calc(100% / 1); }
  ul.cb-side > li { padding: 0 var(--mg-s); }   
}

@media (max-width: 768px) {
  ul.cb6 > li, ul.cb5 > li, ul.cb4 > li, ul.cb3 > li { width: calc(100% / 2); }
  ul.cb2 > li, ul.cb1 > li, ul.cb-side > li, ul.cb3-2 > li { width: calc(100% / 1); }
  ul.list-clm > li { text-align: center; }
}