@font-face {
  font-family: 'Makinas-4-Flat';
  src: url(../font/Makinas-4-Flat.otf);
}

@font-face {
  font-family: 'Teko-Font';
  src: url(../font/Teko-VariableFont_wght.ttf);
}

.main_visual {
  width: 100vw;
  height: 50vw;
  padding: 100px 0;
  background-color: #ccc;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url(../images/main_visual.webp);
}

.main_visual h1 {
  /* font-family: 'Teko-Font'; */
  color: #000;
  font-size: 3rem;
  font-family: "a-otf-ud-shin-go-con80-pr6n", sans-serif;
  font-weight: 300;
  font-style: normal;
  /* line-height: 0.7; */
  border: 1px solid #000;
  text-shadow: 5px 5px 5px #999;
  padding: 30px;
}

.main {
  width: 100%;
  padding-top: 3rem;
}

.main h2 {
  font-size: 1.2rem;
  margin: 3rem 2rem 1rem;
  color: #333;
  font-weight: 700;
  border-bottom: 2px solid #555;
  padding-bottom: 5px;
}

.main h3 {
  padding-left: 2rem;
  font-size: 1.1rem;
}

.product {
  display: flex;
  flex-wrap: wrap;
  margin: 0 2rem;
}

.product li {
  width: calc(100% / 4);
}

.menu_area {
  width: 40%;
  padding-top: 6rem;
  margin: 0 1rem;
  background-color: #EEE;
}

.menu_area h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 5px;
  background-color: #0f2844;
  color: #fff;
  padding: 10px;
  box-shadow: 0 0 0 5px #0f2844;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  /* background-color: #0f2844;
  color: #fff; */
  /* border-radius: 10px 10px 0 0; */
}

.menu li {
  width: 100%;
  margin-left: 10px;
  padding: 20px 0;
  /* font-weight: 700; */
}

.menu li a {
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
}

.product_container {
  margin: 1rem 0.3rem;
}

@media (max-width: 992px) {
  .product li {
    width: calc(100% / 3);
  }
}

@media (max-width: 768px) {
  .menu_area {
    display: none;
  }

  .product {
    flex-wrap: wrap;
  }
}

@media (max-width: 567px) {
  .product li {
    width: calc(100% / 2);
  }
}

.product_container p {
  margin: 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.product_container a p {
  text-decoration: none;
  color: #333;
}

.product_container a:hover {
  color: #333;
  text-decoration: none;
}

.product_container img {
  background-color: #eee;
}

.product_container img:hover,
.menu a img:hover {
  position: relative;
  transform: scale(0.97);
  opacity: 0.7;
  transition: 0.3s;
}




/* デジタルサイネージ　製品詳細ページ */


.product_detail {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 200px;
}

.product_gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.7;
  letter-spacing: 0.1em;
  width: 50%;
  height: fit-content;
}

.product_option {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.gallery_list {
  /* display: flex;
  flex-wrap: wrap; */
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 10px;
}

.main_image {
  width: 100%;
}

.main_image img {
  background-color: #eee;
  aspect-ratio: 1 / 1;
  width: 100%;
  transition: all 0.2s;
}

.product_info {
  width: 50%;
  padding-left: 3rem;
  font-size: 0.9rem;
}

.product_info h4 {
  font-weight: 700;
  margin: 40px 5px 10px;
}

/* ( .product_info table ) */
.product_info table {
  width: 100%;
  border-collapse: collapse; /* ボーダーを一体化 */
}

/* ( .product_info tr ) */
.product_info tr {
  /* trのborder指定を削除 */
  border: none; 
}

/* ( .product_info th, .product_info td ) */
.product_info th,
.product_info td {
  padding: 15px 10px; /* paddingを少し調整 */
  
  /* ↓追加：テーブルの罫線 */
  border: 1px solid #ddd; 
}

/* ( .product_info th ) */
.product_info th {
  width: 30%; /* 項目名の幅を狭く */
  font-size: 0.9rem;
  font-weight: 700;
  background-color: #f5f5f5; /* 背景色を追加 */
  text-align: left; /* 左揃え推奨 */
}

/* ( .product_info td ) */
.product_info td {
  width: 70%; /* 内容の幅を広く */
  font-size: 0.9rem;
  line-height: 1.8;
}

.product_name_box {
  border-bottom: 1px solid #444;
  margin-bottom: 20px;
}

.product_name_box p {
  font-size: 0.8rem;
  margin: 0;
}

.product_name {
  font-family: 'Makinas-4-Flat';
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.product_price {
  font-size: 1.4rem;
  margin-bottom: 0;
}

.product_price span {
  font-size: 0.9rem;
}

.main_color_black,
.main_color_white {
  text-align: center;
  padding: 2px 10px;
  border-radius: 2px;
  margin-right: 10px;
  font-size: 0.8rem;
}

.main_color_black {
  background: #111;
  color: #fff;
}

.main_color_white {
  border: 1px solid #444;
  color: #333;
  background: #fff;
}

.medium {
  display: flex;
  margin-top: 10px;
}

.medium img {
  /* width: calc(100% / 3 - 10px); */
  max-width: 70px;
  margin-right: 10px;
}



/* 写真切り替え */
button.js-image {
  border: none;
  background-color: #eee;
  /* margin-right: 5px; */
}

button.js-image img {
  aspect-ratio: 1 / 1;
  width: max-content;
}

button.js-image img:hover {
  transform: scale(0.97);
  opacity: 0.5;
  transition: 0.3s;
  animation: infinite;
}

/* 写真切り替え end */

/* ( .cv_button ) */
.cv_button {
  /* ↓修正：目立つアクセントカラーに変更 */
  background: #FF6600; 
  color: #fff;
  border: none;
  text-align: center;
  padding: 12px 0; /* 上下の余白を増やす */
  font-weight: 700;
  width: 100%;
  font-size: 1.2rem; /* 少し大きく */
  border-radius: 2px; /* 少し角を丸める */
  transition: all 0.3s ease; /* アニメーション追加 */
}

/* ( .sub_button ) */
.sub_button {
  /* ↓修正：ゴーストボタンに変更 */
  background: #fff;
  color: #0f2844;
  border: 1px solid #0f2844; /* 枠線を追加 */
  
  text-align: center;
  padding: 8px 0;
  font-weight: 700;
  width: 100%;
  margin-top: 10px;
  border-radius: 2px; /* 角を丸める */
  transition: all 0.3s ease; /* アニメーション追加 */
}

/* ( .cv_button:hover, .sub_button:hover ) */
.cv_button:hover,
.cv_button:active {
  opacity: 0.9;
  transform: scale(1.02); /* 0.99だと縮むので、少し拡大するほうが良い */
}

.sub_button:hover,
.sub_button:active {
  background: #0f2844; /* hover時に少し色をつける */
  color: #fff; /* 色を反転させる */
}

.option_h3 {
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 1rem;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid #444;
}

.option_area {
  display: flex;
  flex-wrap: wrap;
}

.option_area div {
  width: 50%;
  font-size: 0.9rem;
  margin-bottom: 40px;
  padding: 5px;
}

.option_area div ul li {
  margin: 10px 0;
  border-bottom: 1px solid #333;
}

.option_area div ul li span {
  font-weight: 700;
}

.option_area h4 {
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 1px solid #444;
  margin-top: 10px;
}

.option_area h4 span {
  font-size: 0.9rem;
}

.option_price {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.option_price span {
  font-size: 0.9rem;
}

.option_area div p {
  margin: 0;
}

.option_area div img {
  width: 100%;
}

/* ( .content_area ) */
.content_area {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* ↓ 修正：nth-childでの指定をやめ、HTML側で .step-item のようなdivで囲うことを推奨 */
/* もしHTMLを修正できない場合は、以下の方法で余白を追加 */

/* ( .content_area div:nth-child(2n-1) ) */
.content_area div:nth-child(2n-1) {
  /* (画像側) */
  width: 40%;
  padding-right: 1.5rem; /* テキストとの間に余白 */
  box-sizing: border-box; /* paddingを含めて40%にする */
}

/* ( .content_area div:nth-child(2n) ) */
.content_area div:nth-child(2n) {
  /* (テキスト側) */
  width: 60%;
  
  /* ↓追加：ステップ間の区切り */
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed #ccc;
}

/* ( .content_area div:last-child ) */
.content_area div:last-child {
  /* 最後のステップの線は不要 */
  border-bottom: none;
}

/* ( .content_area div h4 ) */
.content_area div h4 {
  font-size: 1.3rem; /* 少し大きく */
  font-weight: 700;
  color: #0f2844; /* キーカラー適用 */
  border-bottom: 2px solid #0f2844;
  padding-bottom: 5px;
  margin-bottom: 1rem;
}



.file_format {
  margin: 20px 0 50px;
  width: 100%;
}

.file_format table {
  width: 100%;
  border-collapse: collapse;
}

.file_format table th {
  background-color: #f5f5f5;
  font-weight: 700;
}

.file_format table th,
.file_format table td {
  padding: 10px;
  border: 1px solid #eee;
  font-size: 0.9rem;
}

.file_format h3 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.file_format h4 {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}


@media (max-width: 768px) {
  .product_detail {
    display: block;
  }

  .product_gallery {
    width: 100%;
  }

  .product_name {
    font-size: 1.7rem;
  }

  .product_info,
  .product_option {
    width: 100%;
    padding: 0;
  }

  .content_area div {
    width: 100%;
  }
}

/* デジタルサイネージ　製品詳細ページ */


/* デジタルサイネージコンテンツ作成 */

.data_container {
  display: flex;
  flex-wrap: wrap;
}

.data_container div {
  width: 50%;
  padding: 20px;
  margin-bottom: 50px;
}

.data_container div p {
  font-size: 0.9rem;
}

/* ( details ) */
details {
  width: 100%;
}

/* ( details summary ) */
details summary {
  font-size: 1.2rem; /* 少し調整 */
  font-weight: 700;
  padding: 15px;
  cursor: pointer; /* クリックできることを示す */
  position: relative; /* アイコン配置のため */
  list-style: none; /* デフォルトのマーカー（三角）を消す */
}

/* ↓ 追加：開閉アイコン */
details summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 1.5rem;
  color: #0f2844;
}

/* ↓ 追加：開いた状態のアイコン */
details[open] summary::after {
  content: '−';
}


/* ( details div ) */
details div {
  /* ↓ 修正：背景色をやめ、paddingで余白を調整 */
  display: block; /* flexやwrapは不要かも */
  margin-top: 0;
  padding: 20px;
  background-color: #f9f9f9; /* 薄い背景色 */
  border-top: 1px dashed #ccc;
}

details div div {
  width: calc(50% - 10px);
  margin: 20px 5px;
  background-color: rgba(78, 111, 255, 0.1);
}

details div div p {
  font-size: 1rem;
  padding: 10px;
  margin: 0;
  color: #212121;
}

.faq-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 10px;
}
.faq-q {
  background-color: #0f2844; /* 質問の色 */
}
.faq-a {
  background-color: crimson; /* 回答の色 */
}


.data_menu {
  margin: 50px 0;
  padding: 50px;
  background-color: #eee;
  border-radius: 3px;
}

.data_menu ul {
  margin: 0;
}

.data_menu ul li {
  list-style: disc;
  margin: 10px 0;
  border-bottom: 1px dashed #0f2844;
}

.data_menu ul li a {
  color: #212121;
  font-size: 1.1rem;
  text-decoration: none;
  font-weight: 700;
}

.data_h1 {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: 15px;
  background-color: #0f2844;
  box-shadow: 0 0 0 5px #0f2844;
  color: #fff;
  border: 1px dashed #fff;
}

.data_h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 50px;
  padding: 15px;
  color: #fff;
  background-color: #0f2844;
}

.data_h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 50px;
  margin-bottom: 1.5rem;
  padding: 5px;
  border-bottom: 10px double #0f2844;
}

.data_h4 {
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .data_container {
    display: block;
  }

  .data_container div {
    width: 100%;
    margin-bottom: 30px;
    padding: 0;
  }

  details summary {
    font-size: 1.1rem;
  }

  details div :nth-child(2n) {
    margin-bottom: 40px;
  }

  details div div {
    width: 100%;
  }

  details div div p {
    font-size: 0.9rem;
  }
}

/* デジタルサイネージコンテンツ作成 */




#calendar {
  width: 100%;
  padding: 50px 0;
  background-color: #fafafa
}

.calender__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}

#MonthCal {
  display: inline-block
}

#nextMonthCal {
  display: inline-block
}

.calendar__border {
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 30px 0 0;
  padding: 5px;
  border: 3px dotted #CCC;
  text-align: center
}

footer {
  font-size: 1.2rem
}

.f_nav {
  margin: 0 auto;
  background-color: #EEE;
  color: #333;
  font-size: 62.5%;
  line-height: 1.5
}

.f_nav a {
  color: #333
}

.f_nav-item {
  padding: 30px 0
}

.f_nav-item__list h2 {
  margin-bottom: 1rem;
  font-size: 1.7rem;
  font-weight: bold;
  letter-spacing: 0.2rem
}

.f_nav-item__list ul {
  padding: 0 1rem
}

.f_nav-item__list ul li {
  width: 50%;
  padding-bottom: 0.5rem
}

.f_nav-item__list:not(:last-child) {
  margin-bottom: 30px
}

.f_company {
  margin: 0 auto;
  background-color: #0f2844;
  color: #CCC;
  line-height: 1.5
}

.f_company a {
  color: #CCC
}

.f_company-logo {
  padding: 30px 0 0
}

.f_company-logo img {
  width: 150px;
  height: auto
}

.f_company-logo__description {
  display: none
}

.f_company-list {
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: 1px dotted #666
}

.f_company-list ul {
  padding: 0 1rem
}

.f_company-list ul li {
  width: 50%;
  padding-bottom: 0.5rem
}

.f_company-copy {
  margin: 0 auto;
  padding: 20px 0;
  text-align: center
}



/* --- フォント定義 (前回の商品詳細CSSより) --- */
@font-face {
  font-family: 'Makinas-4-Flat';
  src: url(../font/Makinas-4-Flat.otf);
}

@font-face {
  font-family: 'Teko-Font';
  src: url(../font/Teko-VariableFont_wght.ttf);
}

/* --- TOPページ 改善スタイル --- */

/* オプション案：メインビジュアルの影を消し、枠線を太くする */
.main_visual h1 {
  font-family: 'Makinas-4-Flat', "a-otf-ud-shin-go-con80-pr6n", sans-serif;
  color: #000;
  font-size: 3rem;
  font-weight: 300;
  border: 2 px solid #000;  /* 枠線を太く */
  padding: 30px;
}
/* (HTML改善案①に対応)
   サイドバーとメインコンテンツのラッパー */
.main-content-wrapper {
  display: flex;
  flex-wrap: wrap; /* スマホでは縦並びにするため */
  padding-top: 3rem;
  gap: 2.5rem; /* サイドとメインの余白 */
  margin-bottom: 2.5rem; /* フッターとの余白 */
}

/* サイドバー (.menu_area) の改善 */
.menu_area {
  width: 100%; /* スマホでは全幅 */
  padding-top: 0; /* HTML側でpadding-topを削除したためリセット */
  margin: 0;
  background-color: #fff; /* #EEE をやめて白に */
  /* ↓ PC幅でのみ幅を指定 */
  @media (min-width: 768px) {
    flex: 0 0 240px; /* PC幅では幅を240pxに固定 */
  }
}

/* サイドバー見出し (h3) の改善 */
.menu_area h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 5px;
  /* ↓ 修正：過剰なデザインを削除 */
  background-color: #fff; 
  color: #0f2844; /* キーカラーに変更 */
  padding: 10px 0;
  box-shadow: none; /* box-shadow削除 */
  /* ↓ シンプルな下線に変更 */
  border-bottom: 2px solid #0f2844;
}

/* サイドバーのメニューリスト */
.menu {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.menu li {
  width: 100%;
  margin-left: 0; /* 10pxを削除 */
  padding: 0;
  border-bottom: 1px solid #f0f0f0; /* 区切り線 */
}

/* サイドバー (.menu_area) の hover エフェクトをシャープに変更 */
.menu li a {
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: block;
  padding: 12px 10px;
  transition: all 0.2s ease-in-out; /* トランジションを短く */
  border-bottom: 1px solid #f0f0f0;
}

.menu li a:hover {
  /* ↓ 修正：背景色と文字色を反転させ、メリハリをつける */
  background-color: #0f2844;
  color: #fff;
}

/* (HTML改善案②に対応) カテゴリー見出し */
.menu li.menu-category-title {
  color: #555;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 15px 0px 20px 5px;
  border-bottom: none;
}


/* メインコンテンツ (.main) の改善 */
.main {
  width: 100%;
  padding-top: 0; /* HTML側でpadding-topを削除したためリセット */
  
  @media (min-width: 768px) {
    flex: 1; /* PC幅では残りの幅をすべて取る */
  }
}

/* メインの見出し (h2) */
.main h2 {
  font-size: 1.5rem; /* 少し大きく */
  margin: 0 0 1.5rem 0; /* マージンを調整 */
  color: #333;
  font-weight: 700;
  border-bottom: 3px solid #0f2844; /* デザインを強調 */
  padding-bottom: 10px;
}
/* 2つ目以降の見出しに余白を追加 */
.main h2:not(:first-child) {
  margin-top: 3rem;
}

/* 商品リスト (.product) をグリッドレイアウトに変更 */
.product {
  display: grid;
  /* ↓ 修正：flexからgridに変更 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; /* カード間の余白 */
  margin: 0; /* .main h2 との余白は h2側で管理 */
}

.product li {
  /* ↓ 修正：flex用のwidth指定を削除 */
  width: 100%; 
}
/* 商品カード (.product_container) の改善 */
.product_container {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.1em;
  
  /* ↓ 修正：「丸み」と「影」を削除し、実線（border）に変更 */
  border: 1px solid #ddd; /* 影(box-shadow)をやめ、枠線に */
  border-radius: 0;        /* 角丸(border-radius)を削除 */
  
  padding: 0; /* カード全体のpaddingを削除 */
  transition: all 0.2s ease-in-out; /* トランジションを短く */
  background-color: #fff;
  overflow: hidden; /* 画像のはみ出し防止 */
}

/* 商品カードのhoverエフェクト */
.product_container:hover {
  /* ↓ 修正：「ふわっと浮き上がる」表現を削除 */
  transform: none;      /* transform(浮き上がり)を削除 */
  box-shadow: none;   /* hover時の影も削除 */

  /* ↓ 修正：枠線の色をキーカラーに変えることでメリハリを出す */
  border-color: #0f2844; 
}

/* ↓ 修正：hover時に画像が縮むエフェクトを削除 */
.product_container a:hover {
  color: #333;
  text-decoration: none;
}
.product_container img:hover {
  transform: none;
  opacity: 1;
}

/* 商品カード内の画像 */
.product_container img {
  background-color: #fff;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: 0; /* マージン削除 */
  border-bottom: 1px solid #eee; /* テキストとの区切り線 */
}

/* 商品カード内のテキスト（商品名・価格） */
.product_container p {
  margin: 0;
  letter-spacing: 0.1em;
  
  /* ↓ 修正：テキストエリアの余白をpaddingで確保 */
  padding: 0.5rem 1rem;
}
/* 商品名 */
.product_container p:first-of-type {
  font-weight: 700;
  color: #111;
  padding-top: 1rem; /* 上の余白 */
}
/* 価格 */
.product_container p:last-of-type {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f2844;
  padding-bottom: 1rem; /* 下の余白 */
}

/* 関連商品用ボタン */
.similar_products {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
  justify-content: space-around;
}

.similar_products a {
  width: 40%;
  background: #0f2844;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  padding: 15px;
}

.similar_products a:hover {
  text-decoration: none;
  color: #fff;
  transform: scale(1.02);
}

.similar_products a img {
  width: 50%;
  border-radius: 20px;
}


@media (max-width:900px){
  .similar_products a {
    width: 100%;
    margin: 20px 0;
  }
}