@charset "utf-8";
/*
 * 全てのページのスタイルシート
 * ======= ====== ||    \\    ====
 * ||        ||   ||  \\    ||    ||
 * ||=====   ||   ||\\     ||      ||
 * ||        ||   ||  \\    ||    ||
 * ======= ====== ||    \\    ====
 *
 * モバイルファースト
 * => 基本の CSS は、モバイル用のデザインとする。
 * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する。
 *
 * ここ (style.css) には、
 * ウェブサイト全体に共通する CSS、
 * もしくは、多くのページで使い回す CSS、
 * および、ホームを除く、個別のページごとのスタイル
 * を記述する。
 * => できるだけ共通化して、使い回せるようにする。
 *     => 全体のスタイルを一発で変更できる。
 * => ホームだけは、「style_home.css」で必要箇所を上書きする。
 *
 * できるだけシンプルに分かりやすくする。
 * => 複雑にしない。
 */
/*--------------------------------------------------
>>> 基本設定
--------------------------------------------------*/
body, html {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.4em;
  /* 基本となる文字色 - 真っ黒より少し明るめがいい */
  /*color: #333;*/
  /*color: #000;*/
  color: #1f1f1f;
  /* 基本となるフォント - 欧文フォントを日本語フォントより先に記載する */
  font-family: "Roboto", "Arial", sans-serif;
  overflow-x: hidden;
}
/*--------------------------------------------------
>>> ページ全体を囲むdiv
--------------------------------------------------*/
.page {
  background-color: #ffffff;
}
/*--------------------------------------------------
>>> リンクの共通スタイル
--------------------------------------------------*/
a {
  color: #0000ff;
}
a:visited {
  color: #0000ff;  /* 訪問したリンクも色は同じにする */
}
a:hover {
  cursor: pointer;
}
/*--------------------------------------------------
>>> 段落の汎用クラス
--------------------------------------------------*/
.has-text-align-right {
  text-align: right;
}
/*--------------------------------------------------
>>> テーブルの汎用クラス
--------------------------------------------------*/
.table-w-full {  /* スマホでは、幅100%にする */
  width: 100%
}
/*--------------------------------------------------
>>> ボタンの汎用クラス
--------------------------------------------------*/
/* 送信ボタンなど (button要素に用いる) */
.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #2589d0;  /* 背景色は、ボタンの種類によって、個別に上書きする */
  color: #fff;  /* 文字色は、ボタンの種類によって、個別に上書きする */
  border: none;
  border-radius: 25px;  /* 角を丸く */
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* 軽い影 */
}
/*.btn:hover {*/
  /*background-color: #1a6da8;*/  /* 背景色は、ボタンの種類によって、個別に上書きする */
/*}*/
.btn:active {
  transform: translateY(1px);  /* クリック時に少し沈む */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------
>>> ヘッダー
--------------------------------------------------*/
.header {
  width: 100%;
  height: 50px;
  padding: 5px 15px 5px 10px;
  border-bottom: 4px solid #469;
  position: fixed;  /* 上に固定 */ /* positionを指定しないと、z-indexは使えない */
  z-index: 100;  /* メニューより上に重ねる */
  background-color: #ffffff;
  display: flex;  /* 横並びにする */
  justify-content: space-between;  /* 両端に広げて配置する */
  align-items: center;  /* 上下中央に揃える */
  box-sizing: border-box;  /* 全て含めたサイズにする */
}
/*--------------------------------------------------
>>> サイトタイトル
--------------------------------------------------*/
/* ホームのh1のスタイルを無効化 */
.header h1 {
  font-size: 18pt;
  font-weight:normal;
  margin: 0;
  padding: 0;
  display: inline;
}
.site-name {
  margin: 5px 0 0 0;  /* タイトルロゴの位置は微調整する */
  padding: 0;
}
.site-name img {
  width: 160px;
  margin: 0;
  padding: 0;
}
/*--------------------------------------------------
>>> メインメニュー (ヘッダーメニュー)
--------------------------------------------------*/
/* スマホ用 */
.menu-sp {
  position: fixed;  /* 画面に固定 */
  top: 0;
  right: -100%;  /* 最初は画面の右側に隠す */
  width: 80%;  /* メニューの幅 */
  height: 100vh;  /* 画面いっぱいの高さ */
  background: #f5f5f5;
  z-index: 10;  /* コンテンツより上に重ねる */
  transition: all 0.3s ease;  /* 動きを滑らかに */
  padding-top: 60px;  /* ヘッダ (ボタン) と重ならない高さにする */
}
.menu-sp ul {
  list-style: none;  /* リストの点を消す */
  padding: 0;
  margin: 0;
  width: 100%;
}
.menu-sp ul li {
  border-bottom: 1px solid #eee;  /* 下線を入れる */
}
.menu-sp ul li:first-child {
  border-top: 1px solid #eee;  /* 一番上だけ上線も入れる */
}
.menu-sp ul li a {
  display: block;  /* クリックできる範囲を広げる */
  padding: 10px 0;  /* 上下の余白 */
  text-decoration: none;  /* リンクの下線を消す */
  color: #333;
  font-size: 16px;
  letter-spacing: 0.1em;  /* 文字の間隔を少し空ける (雰囲気が出る) */
  text-align: center;
  transition: background-color 0.3s;
}
.menu-sp ul li a:hover {
  background-color: #fafafa;
  color: #000;
}
/* ハンバーガーメニュー */
.menu-btn {
  position: relative;
  width: 30px;
  height: 24px;
  cursor: pointer;
}
.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s;  /* アニメーションの速度 */
}
/* 各線の位置固定 */
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 11px; }
.menu-btn span:nth-child(3) { bottom: 0; }
/* 背景を暗くするパネル */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);  /* 黒の50%、透明 */
  z-index: 5;  /* メニューより下、コンテンツより上 */
  opacity: 0;  /* 最初は透明 */
  visibility: hidden;  /* コンテンツをクリックできなくする */
  transition: all 0.3s;
}
/* クラスが付いたとき (表示しているとき) */
.menu-sp.is-active {
  right: 0;  /* 画面にスライドイン */
}
.menu-btn.is-active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);  /* 1本目を45度回転 */
}
.menu-btn.is-active span:nth-child(2) {
  opacity: 0;  /* 2本目を消す (透明にする) */
}
.menu-btn.is-active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);  /* 3本目を-45度回転 */
}
.menu-overlay.is-active {
  opacity: 1;  /* 背景をオーバーレイ */
  visibility: visible;
}
body.is-fixed {
  overflow: hidden;  /* 背後のスクロールを止める */
}
/* PC用 */
.menu-pc {
  display: none;  /* スマホでは消す */
}
/*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
/* コンテンツの装飾が基本 => homeはstyle_home.cssで上書きする */
.content {
  padding: 50px 6px 0 6px;  /* ヘッダの高さ下げる (position: fixed;で固定しているため) */
}
.content h1 {
  font-size: 120%;
}
.content h2 {
  font-size: 150%;
}
.content p {
  font-size: 90%;
}
.content table {
  font-size: 85%;
}
/*--------------------------------------------------
>>> パンくずリスト
--------------------------------------------------*/
.breadcrumbs {
  font-size: 85%;
  margin: 0;
  padding: 0;
  list-style: none;  /* リストのマークを消す */
}
.breadcrumbs li {
  display: inline;  /* 横並びに表示 */
  list-style: none;
}
.breadcrumbs li:after {
  /* > を表示 */
  content: '>';
  padding: 0 0.2em;
  /*color: #333;*/
  color: #1f1f1f;
}
.breadcrumbs li:last-child:after {
  content: '';
}
.breadcrumbs li a {
  text-decoration: none;
  /*color: #333;*/
  color: #1f1f1f;
}
.breadcrumbs li a:hover {
  text-decoration: underline;
}
/*--------------------------------------------------
>>> はじめに  不要  そのうち消す
--------------------------------------------------*/
.preface {
  margin-top: 1rem !important;
}
/*--------------------------------------------------
>>> カテゴリーページ
--------------------------------------------------*/
/* 商品一覧ページ */
/* 販売店一覧ページ */
.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.product-table th, .product-table td {
  padding: 3px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.product-table th {
  width: 1px;  /* 最小幅を指定しておく => white-space: nowrap;と合わせる */
  white-space: nowrap;  /* 改行を禁止して、中身に合わせる */
  background-color: #f2f2f2;
}
.product-table-name {
  font-weight: bold;
  padding-left: 5px;
  border-left: 5px solid green;
}
.product-table-view-link {
  padding: 3px;
}
.product-table-img {
  width: 30%;
}
/* 販売店一覧ページ */
.shop-table {
  width: 100%;
  border-collapse: collapse;
}
.shop-table th, .shop-table td {
  padding: 3px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.shop-table th {
  width: 1px;  /* 最小幅を指定しておく => white-space: nowrap;と合わせる */
  white-space: nowrap;  /* 改行を禁止して、中身に合わせる */
  background-color: #f2f2f2;
}
/*--------------------------------------------------
>>> 記事ページ
--------------------------------------------------*/
/* 事業概要ページ */
.about-table {
  width: 100%;
  border-collapse: collapse;  /* 線を重ねる */
}
.about-table th, .about-table td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.about-table th {
  width: 1px;  /* 最小幅を指定しておく => white-space: nowrap;と合わせる */
  white-space: nowrap;  /* 改行を禁止して、中身に合わせる */
  background-color: #f2f2f2;
  padding: 10px 5px;
}
.about-table td {
  padding: 10px 5px;
}
/* お問い合わせページ */
.contact-form-group {
  margin-bottom: 15px;
}
.contact-form-group label {
  display: block;
  margin-bottom: 5px;
}
.contact-form-group input[type=text], .contact-form-group input[type=email], .contact-form-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;  /* 全て含めたサイズにする */
}
.contact-error {
  color: red;
}
.contact-address {
  position:absolute;
  left:-9999px;
}
.contact-not-robot {
  display: none;
}
.contact-btn:hover {
  background-color: #1a6da8;
}
.contact-notes {
  margin-top: 3em;
}
/* お問い合わせ - 確認ページ */
.confirm-table {
  width: 100%;
  border-collapse: collapse;  /* 線を重ねる */
}
.confirm-table th, .confirm-table td {
  border: 1px solid #ccc;
}
.confirm-table th {
  width: 1px;  /* 最小幅を指定しておく => white-space: nowrap;と合わせる */
  white-space: nowrap;  /* 改行を禁止して、中身に合わせる */
  background-color: #f2f2f2;
  padding: 10px 5px;
}
.confirm-table td {
  padding: 10px 5px;
}
.confirm-submit-btn {
  margin-top: 1em;
}
.confirm-submit-btn:hover {
  background-color: #1a6da8;
}
.confirm-back-btn {
  margin-top: 1em;
  background-color: #333;
}
.confirm-back-btn:hover {
  background-color: rgb(34, 34, 34);
}
/* 個別 (日ごと) のお知らせページ */
.notice_title {
  margin-top: 1em;
}
.notice_title h1 {
  margin-top: 0;
}
.notice_date {
  font-size: 90%;
}
/*--------------------------------------------------
>>> お知らせのリスト
--------------------------------------------------*/
.notice_list {
  margin: 0.4rem 0;
  padding: 0.4rem 0;
  position: relative;  /* div全体にリンクをつけるため */
}
.notice_list a {  /* div全体にリンクをつけるため */
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
}
.notice_list_date {
  margin: 0;
  padding: 0;
  /*color: #333;*/
  color: #000;
  font-size: 80%;
}
.notice_list_title {
  margin: 0;
  padding: 0;
  font-size: 90%;
  /*color: #333;*/
  color: #000;
}
.notice_list_read_more {
  margin: 0 0 2rem 0;
  /*color: #333;*/
  color: #000;
  font-size: 90%;
  text-align: center;
}
.notice_list_read_more a {
  padding: 0.1rem 0.5rem;
  /*color: #333;*/
  color: #000;
  border: #333 solid 1px;
}
/*--------------------------------------------------
>>> フッター
--------------------------------------------------*/
.footer {
  padding: 0px 8px 5px 8px;
  border-top: 4px solid #469;
  background: #f5f5f5;
}
.footer a {
  color: #000;
  /*color: #333;*/
  text-decoration: none;
}
.footer a:visited {
  /*color: #000000;*/
  color: #000;
  /*color: #333;*/
}
/* 更新日 */
.post-date {
  margin: 1em 0 0 0;
}
.last-updated {
  font-size: 85%;
}
/* フッタ−のタイトルロゴ */
.footer-site-name {
  margin: 25px 0 0 0;
  padding: 0;
}
.footer-site-name img {
  width: 120px;
  margin: 0;
  padding: 0;
}
/* フッタ−の事業者名・住所等 */
.footer-about-us {
  font-size: 75%;
  padding: 0;
  margin: 0;
  line-height: 1em;
}
/* フッターメニュー */
.footer-nav {
  font-size: 80%;
  margin: 30px 0;
  line-height: 1.4em;
}
ul.footer-menu {
  padding: 0;
  list-style: none;  /* リストのマークを消す */
}
.footer-menu li {
  display: inline-block;  /* 横並びに表示 */
  padding-right: 10px;  /* 項目間のスペース */
}
/* 関連サイトの文字 */
.footer-related-site {
  font-weight: bold;
}
/* コピーライト */
.copyright {
  font-size: 85%;
}
/*==========           ===========           ===========           ===========           ===========
>>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する
=========           ===========           ===========           ===========           ===========*/
@media screen and (min-device-width: 768px) {
/*--------------------------------------------------
>>> ヘッダー
--------------------------------------------------*/
.header {
  padding: 20px 100px 8px 100px;
  height: 60px;
}
/*--------------------------------------------------
>>> メインメニュー (ヘッダーメニュー)
--------------------------------------------------*/
/* スマホ用 */
.menu-sp {
  display: none;  /* PCでは消す */
}
.menu-btn {
  display: none;  /* PCでは消す */
}
.menu-overlay {
  display: none;  /* PCでは消す */
}
/* PC用 */
.menu-pc {
  display: block;  /* PCでは表示 */
  font-size: 110%;
  font-weight: bold;
}
.menu-pc ul li a {
  text-decoration: none;
  color: #1f1f1f;
}
.menu-pc a:hover {
  color: #000;
}
.menu-pc ul {
  padding: 0;
  margin: 0;
  list-style: none;  /* リストのマークを消す */
}
.menu-pc li {
  display: inline-block;  /* 横並びに表示 */
  padding-right: 20px;  /* 項目間のスペース */
}
.menu-sp ul li a:hover {
  background-color: #eee;
}
/*--------------------------------------------------
>>> コンテンツ
--------------------------------------------------*/
.content {
  padding: 60px 100px 0 100px;  /* 上はヘッダの高さに合わせる */
}
/*--------------------------------------------------
>>> フッター
--------------------------------------------------*/
.footer {
  padding: 0px 100px 5px 100px;
}
}  /* @media screen and (max-device-width: 768px) */