@charset "utf-8";

.development {
  background-color: #ffd800;
}

#contentsBox {
  font-size: 16px;
}

/*----------------------------------------------------------------*/
/* ナビゲーション全体 */
.global-nav ul {
  display: flex; /* Flexboxを使い、子要素(li)を横並びにする */
  list-style: none; /* リストの黒丸を消す */
  margin-left: 35px;
  padding: 0;
}

/* メニューの各項目 */
.global-nav li {
  /* 最後の項目以外に右の区切り線を追加 */
  border-right: 1px solid #5c4a3d;
}

/* 最後のメニュー項目 */
.global-nav li:last-child {
  /* 最後の項目には区切り線は不要なので消す */
  border-right: none;
}

/* メニューのリンク */
.global-nav a {
  display: block; /* 親要素(li)の全体をクリック可能にする */
  padding: 10px 20px; /* 内側の余白（上下10px, 左右20px） */
  text-decoration: none; /* リンクの下線を消す */
  color: #5c4a3d; /* 文字色を茶色系に設定 */
  transition: background-color 0.3s ease; /* 背景色の変化を0.3秒で滑らかにする */
  font-weight: bold;
  font-size: 15px;
}

/* マウスが乗った時のリンクのスタイル */
.global-nav a:hover {
  background-color: #f5ebe0; /* 背景色を薄いベージュ系に設定 */
}

/*----------------------------------------------------------------*/
.main-heading {
  font-size: 1.2em; /* 大きめの文字サイズ */
  font-weight: bold; /* 太字で強調 */
  color: #2c3e50; /* 濃い青系で信頼感 */
  background: linear-gradient(
    to right,
    #fdfbfb,
    #ebedee
  ); /* グラデ背景で目を引く */
  padding: 1em; /* 内側の余白で読みやすく */
  line-height: 1.6; /* 行間を広げて読みやすく */
  text-align: center; /* センター寄せでタイトル感 */
}

.content_whatIs {
  line-height: 1.8;
  font-size: 16px;
  max-width: 800px;
}

.content_whatIs h2,
.content h3,
.content h4 {
  color: #2c3e50;
  margin-top: 1.5em;
}

.content_whatIs h2 {
  font-size: 1.6em;
  border-left: 6px solid #3498db;
  padding-left: 0.5em;
}

.content_whatIs h3 {
  font-size: 1.4em;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.3em;
  margin-bottom: 0.8em;
}

.content_whatIs h4 {
  font-size: 1.2em;
  color: #555;
  margin-top: 1em;
}

.content_whatIs ul {
  padding-left: 1.2em;
  margin-top: 0.5em;
}

.content_whatIs ul li {
  margin-bottom: 0.5em;
  list-style-type: "・";
  padding-left: 0.5em;
}

.content_whatIs p {
  margin: 1em 0;
}

.container1 {
  max-width: 670px; /* コンテンツの最大幅 */
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.container1 .heading {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ccc; /* 下線 */
  position: relative;
}

.container1 .content {
  font-size: 16px;
  line-height: 1.8; /* 行の高さ */
  color: #555;
  text-align: justify; /* 両端揃え */
}

.container2 {
  margin-top: 20px;
}

.container2 .heading {
  font-size: 24px;
  font-weight: bold;
  color: #845938;
  text-align: center;
}
.container3 {
  width: 100%;
  max-width: 700px; /* 画像のコンテンツ幅に合わせる */
  background-color: #ffffff;
  border-radius: 8px;
  padding: 40px 30px; /* 内側の余白 */
  box-sizing: border-box;
}

.container3 .section {
  margin-bottom: 30px;
}

.container3 .section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  border-left: 5px solid #5cb85c; /* 左の縦線 */
  padding-left: 10px;
}

.container3 .section-content {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  text-align: justify; /* 両端揃え */
}

.container3 .slogan-box {
  margin: 40px 0;
  text-align: center;
}

.container3 .slogan {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  letter-spacing: 1px; /* 字間調整 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 影 */
}

.container3 .logo-collaboration {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 折り返しを許可 */
  margin: 40px 0;
  gap: 15px; /* 要素間の隙間 */
}

.container3 .logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.container3 .logo-image {
  width: 150px; /* ロゴ画像のサイズ */
  object-fit: contain; /* 画像がはみ出さないように */
}

.container3 .logo-text-small {
  font-size: 12px;
  color: #888;
  margin-top: -5px; /* 調整 */
}

.container3 .logo-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.container3 .collaboration-x {
  font-size: 24px;
  font-weight: bold;
  color: #666;
  margin: 0 10px;
}

.container3 .highlight-box {
  background-color: #e0f2f7; /* デフォルトの背景色 */
  padding: 15px 15px;
  border-radius: 5px;
  text-align: center;
  margin: 30px 0 15px; /* 上下の余白 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.container3 .highlight-box p {
  padding: 0;
}

.container3 .green-light-bg {
  background-color: #a0d9b4; /* 明るい緑 */
}

.container3 .green-dark-bg {
  background-color: #61b36f; /* 暗い緑 */
}

.container3 .highlight-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

.container3 .support-text,
.sdgs-explanation {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 30px;
  text-align: justify;
}

/*----------------------------------------------------------------*/

.container4 {
  width: 100%;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px 20px;
  box-sizing: border-box;
}

.container4 .main-title {
  font-size: 28px;
  font-weight: bold;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* テキストが改行されないように */
}

.container4 .decorative-line {
  display: block;
  width: 80px; /* 線の長さ */
  height: 2px;
  background-color: #a0d9b4; /* 薄い緑色 */
  position: relative;
  top: 0;
}

.container4 .decorative-line.left {
  margin-right: 20px;
  transform: rotate(-10deg); /* 左の線を少し回転 */
}

.container4 .decorative-line.right {
  margin-left: 20px;
  transform: rotate(10deg); /* 右の線を少し回転 */
}

/* スケジュール部分のFlexboxレイアウト */
.container4 .schedule-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px; /* 列間の隙間 */
  flex-wrap: wrap; /* レスポンシブ対応で折り返す */
  margin-bottom: 40px;
}

.container4 .schedule-column {
  flex: 1; /* 幅を均等にする */
  min-width: 300px; /* 最小幅を設定 */
  text-align: left;
}

.container4 .column-title {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.container4 .weekday {
  background-color: #5cb85c; /* 緑系の色 */
}

.container4 .saturday {
  background-color: #4a90e2; /* 青系の色 */
}

/* タイムラインのスタイル */
.container4 .timeline {
  position: relative;
  padding-left: 15px; /* 時間軸の線のために左にパディング */
}

.container4 .timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #a0d9b4; /* タイムラインの線 */
}

.container4 .timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px; /* 各項目間のスペース */
  position: relative;
}

.container4 .timeline-item:last-child {
  margin-bottom: 0; /* 最後の項目は下マージンなし */
}

.container4 .timeline-item::before {
  content: "";
  position: absolute;
  left: -7px; /* タイムラインの線の少し左に配置 */
  top: 3px; /* 時間の文字の高さに合わせて調整 */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #a0d9b4; /* 丸の色 */
  border: 2px solid #ffffff; /* 白い縁 */
  box-shadow: 0 0 0 2px #a0d9b4; /* 外側の影 */
  z-index: 1; /* 時間軸より手前に表示 */
}

.container4 .time {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  width: 60px; /* 時間の表示幅を固定 */
  flex-shrink: 0; /* 縮まないように */
  margin-right: 15px;
  text-align: right;
}

.container4 .description {
  font-size: 15px;
  color: #555;
}

.container4 .description small {
  font-size: 0.8em;
  color: #777;
}

/* 休憩ライン */
.container4 .break-line-left,
.container4 .break-line-right {
  position: relative;
  margin: 20px 0; /* 上下の余白 */
  text-align: center;
  font-size: 14px;
  color: #777;
}

.container4 .break-line-left::before,
.container4 .break-line-right::before {
  content: "";
  position: absolute;
  left: 0; /* タイムラインの線に合わせて */
  top: 50%;
  transform: translateY(-50%);
  width: 2px; /* 線幅 */
  height: 100%; /* 高さ */
  background-color: #a0d9b4;
  border-style: dashed; /* 点線に */
  border-width: 0 0 0 2px; /* 左側にだけ点線 */
  border-color: #a0d9b4;
}

.container4 .break-line-left .break-text {
  position: absolute;
  top: -15px;
  left: 20px;
  transform: translateY(-50%);
  background-color: #ffffff; /* テキストの背景を白くして下の線を隠す */
  padding: 0 5px;
}

.container4 .break-line-right .break-text {
  position: absolute;
  top: -15px;
  left: 20px;
  transform: translateY(-50%);
  background-color: #ffffff;
  padding: 0 5px;
}

/* 昼食情報のセクション */
.container4 .lunch-info {
  margin-top: 20px;
  padding-top: 20px;
}

.container4 .lunch-info p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  text-align: justify;
}
/*----------------------------------------------------------------*/
.container5 h2 {
  font-size: 1.6em;
  border-left: 6px solid #3498db;
  padding-left: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.container5 .photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列にする */
  gap: 1em; /* 写真の間に余白 */
  max-width: 800px;
  margin: 0 auto;
}

.container5 .photo-grid img {
  width: 100%; /* 列の幅に合わせてリサイズ */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/

p#mainImg {
  text-align: center;
  margin-bottom: 0px;
}

div#mainContents {
  /*	padding: 30px 60px;*/
  padding-left: 33px;
}

/*----------------------------------------------------------------*/

div#sideBox {
  float: left;
  width: 200px;
}

div#sideMenu {
  width: 200px;
  margin-top: 10px;
}

/*----------------------------------------------------------------*/

div#rightContents {
  float: right;
  width: 710px;
}

div#contentsBox {
  margin-bottom: 20px;
  width: 670px;
}

div#contentsBox p {
  padding: 0 0 10px 10px;
}

#loopslider {
  margin: 0 auto;
  width: 600px;
  height: 150px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

#loopslider ul {
  /*	width: 100%;*/
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}
#loopslider ul li {
  width: 450px;
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}

#loopslider ul:after {
  content: ".";
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
}

#loopslider ul {
  display: inline-block;
  overflow: hidden;
}

#contentsBox .new {
  overflow: auto;
  height: 100px;
  width: 670px;
  padding-left: 10px;
}
#contentsBox .new dl {
  clear: left;
  width: 650px;
  height: 35px;
  border-bottom: 1px dashed #cccccc;
  overflow: hidden;
}
#contentsBox .new dt {
  font-weight: bold;
  color: #999;
  float: left;
  width: 100px;
  padding-top: 5px;
}
#contentsBox .new dd {
  float: left;
  color: #555;
  width: 540px;
  padding-top: 5px;
}
#contentsBox .new dd img {
  vertical-align: middle;
}

#contentsBox .mb1em {
  margin-bottom: 1em;
}

#contentsBox .access {
  float: left;
  width: 380px;
  padding-left: 10px;
}

#contentsBox .access dl {
  clear: left;
  width: 670px;
  height: 70px;
  border-bottom: 1px dashed #cccccc;
  overflow: hidden;
}
#contentsBox .access .border {
  width: 670px;
  border-bottom: 1px dashed #cccccc;
  margin-bottom: 10px;
}
#contentsBox .access dt {
  font-weight: bold;
  color: #999;
  width: 100px;
  padding-top: 10px;
}
#contentsBox .access dd {
  color: #555;
  width: 370px;
  padding-left: 5px;
}

#contentsBox .map {
  float: right;
}

#contentsBox .map dl {
  overflow: hidden;
}
#contentsBox .map dt {
  float: left;
  padding-top: 0px;
  padding-left: 10px;
}
#contentsBox .map dd {
  float: left;
  color: #555;
  padding-top: 2px;
  padding-left: 5px;
}

#contentsBox .new .hight {
  height: 60px;
}

/*01_greeting----------------------------------------------------------------*/

div#greeting {
  float: left;
  padding: 10px 0 0 20px;
  width: 672px;
}

/*02_summary----------------------------------------------------------------*/

div#summary {
  float: left;
  padding: 10px 0 0 20px;
  width: 672px;
}

div#summary .summary_table td {
  vertical-align: top;
  padding: 5px 5px 5px 10px;
  border: 1px solid #ccc;
}

/*03_distinctive----------------------------------------------------------------*/

div#distinctive {
  float: left;
  padding: 10px 0 0 20px;
  width: 672px;
}

/*04_introduce----------------------------------------------------------------*/

div#introduce {
  float: left;
  padding: 10px 0 0 20px;
  width: 672px;
}

iframe {
  width: 672px;
  height: 1000px;
  overflow: auto;
}

/*05_subsidy----------------------------------------------------------------*/

div#subsidy {
  float: left;
  padding: 10px 0 0 20px;
  width: 672px;
}

div#subsidy td.lefttd {
  width: 100px;
  height: 25px;
  padding-left: 5px;
}

/*06_contact----------------------------------------------------------------*/

div#inquiry {
  float: left;
  padding: 10px 0 0 20px;
}

div#mailform {
  width: 660px;
  padding: 20px 0 10px 15px;
  margin: 20px 0 40px 0;
  background: #fefaf5;
  text-align: center;
}

div#mailform table {
  text-align: left;
}

div#mailform td {
  vertical-align: top;
  padding: 5px 5px 5px 10px;
  height: 32px;
}

div#mailform td.lefttd {
  width: 150px;
}

div#mailform td.centertd {
  width: 60px;
  vertical-align: top;
}

div#mailform .emphasis {
  color: #cb434c;
}

div#mailform #contact_txt {
  width: 369px;
  height: 132px;
}

/*07_course----------------------------------------------------------------*/

div#course {
  padding: 10px 0 0 20px;
  width: 672px;
}

/*08_daytime----------------------------------------------------------------*/

div#daytime {
  padding: 10px 0 0 20px;
  width: 672px;
}

/*08_commission----------------------------------------------------------------*/

div#commission {
  padding: 10px 0 0 20px;
  width: 672px;
}

div#commission #commission_inside,
div#commission #commission_outside {
  display: none;
}

div#commission #commission_top_link,
div#commission #commission_inside_link,
div#commission #commission_outside_link {
  cursor: pointer;
}

div#commission #slide_inside {
  margin: 0 auto;
  width: 672px;
  height: 150px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

div#commission #slide_inside ul {
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}
div#commission #slide_inside ul li {
  width: 100px;
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}

div#commission #slide_inside ul:after {
  content: ".";
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
}

div#commission #slide_inside ul {
  display: inline-block;
  overflow: hidden;
}

div#commission #slide_outside {
  margin: 0 auto;
  width: 672px;
  height: 150px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

div#commission #slide_outside ul {
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}
div#commission #slide_outside ul li {
  width: 100px;
  height: 150px;
  float: left;
  display: inline;
  overflow: hidden;
}

div#commission #slide_outside ul:after {
  content: ".";
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
}

div#commission #slide_outside ul {
  display: inline-block;
  overflow: hidden;
}

div#commission .waku {
  padding: 7px;
  box-shadow: 5px 5px 5px rgba(20, 20, 20, 0.2);
  margin-right: 5px;
  margin-bottom: 10px;
}

/*08_shiitake----------------------------------------------------------------*/

div#shiitake {
  padding: 10px 0 0 20px;
  width: 672px;
}

div#shiitake #shiitake_pack,
div#shiitake #shiitake_effect,
div#shiitake #shiitake_item,
div#shiitake #shiitake_sale {
  display: none;
}

div#shiitake #shiitake_hothouse_link,
div#shiitake #shiitake_pack_link,
div#shiitake #shiitake_effect_link,
div#shiitake #shiitake_item_link,
div#shiitake #shiitake_sale_link {
  cursor: pointer;
}

div#shiitake table td {
  padding: 10px;
  width: 190px;
}

div#shiitake .shiitake_table td:nth-child(2) {
  padding: 10px;
  width: 430px;
}

div#shiitake .working_table td {
  vertical-align: top;
}

div#shiitake .shiitake_table td {
  vertical-align: top;
}

#shiitake .twitter_table td {
  width: 400px;
}

#shiitake .twitter_table .icon {
  width: 80px;
}

#shiitake .twitter_table .qr {
  width: 100px;
}
/*09_event----------------------------------------------------------------*/

div#event {
  padding: 10px 0 0 20px;
  width: 672px;
}

div#event .highlight {
  background-color: #ffff80;
  font-weight: bold;
}

/*10_office----------------------------------------------------------------*/

div#office {
  width: 672px;
  font-size: 15px;
}

div#office .office_table td {
  vertical-align: top;
  padding: 5px 5px 5px 10px;
  border: 1px solid #ccc;
}

div#office .lefttd {
  width: 200px;
}

div#office .righttd {
  width: 50px;
}

/*10_pamphlet----------------------------------------------------------------*/

div#pamphlet {
  padding: 10px 0 0 20px;
  width: 672px;
}

/*12_cooperation----------------------------------------------------------------*/

div#cooperation {
  width: 672px;
  padding: 10px 0 0 20px;
}
#cooperation .cooperation_table {
  width: 100%;
  margin-left: 20px;
}
#cooperation .cooperation_table td,
th {
  padding: 20px;
}
#cooperation .cooperation_table td {
  padding-top: 20px;
}
#cooperation .cooperation_table td img {
  width: 250px;
}

/*----------------------------------------------------------------*/

.photo {
  width: 300px; /* imgと合わせます */
  position: relative;
  padding: 5px;
  border: 1px solid #ccc;
  -webkit-box-shadow: 3px 3px 3px #ccc;
  -moz-box-shadow: 3px 3px 3px #ccc;
  box-shadow: 3px 3px 3px #ccc;
}