/* style.css */

:root {
  --accent: #2884bf;
}
/* ========================================
   基本設定
   ======================================== */
body {
  line-height: 130%;
}

/* ========================================
   レイアウトコンテナ
   ======================================== */
.l-wrapper {
  padding: 1em;
  margin: 0 0 1em 0;
}

/* ========================================
   ページ内目次ナビゲーション
   ======================================== */

/*メニューバー*/
.menu-toggle {
	display: none;
}
#globalnavi2 {
	margin: 0;
	padding: 0;
}

#globalnavi2 ul {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#globalnavi2 li {
	width: fit-content;
	margin: 0;
	padding: 0;
	font-size: 1.0em;
	font-weight: bold;
	border-left: 1px solid #ffffff;
}

#globalnavi2 a {
	display: block;
	width: 100%;
	padding: 2px 18px;
	height: 3.1em;
	line-height: 2.5em;
	text-align: center;
	text-decoration: none;
  text-wrap: nowrap;

  border: 1px solid #ccc;
	border-bottom: 5px solid var(--accent);
	background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
	box-shadow: inset 1px 1px 1px #fff;
}

#globalnavi2 a:hover {
	background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

#globalnavi2 ul li:first-child {
	border-left: none;
}

/* ========================================
   新着情報
   ======================================== */
.shintyaku-box {
  border: 1px solid #414d5a;
  margin: 1.5em 0;
  width: calc(100% - 82px - 1em);
  float: left;
}

.shintyaku {
  height: 33px;
  background: #E6E6E6;
}

.shintyaku > div {
  float: left;
  width: 96px;
  height: 33px;
  text-align: center;
  padding-top: 8px;
  background: #2884bf;
  color: #ffffff;
}

.update-scroll-frame {
  max-width: 100%;
  height: 5em;
  margin-bottom: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

dl.update-scroll {
  width: 100%;
  padding: 4px;
  line-height: 1.5;
  font-size: 14px;
  margin: 0;
}

dl.update-scroll dt {
  width: 120px;
  float: left;
  margin: 0;
  padding-bottom: 8px;
}

dl.update-scroll dd {
  max-width: 780px;
  margin-left: 120px;
  padding-bottom: 8px;
}

/* ========================================
   資料請求ボタン
   ======================================== */
.shiryou {
  display: block;
  width: max-content;
  margin: 1.5em 0 0 auto;
  float: none;
}

/* ========================================
   タイトルバー・見出し
   ======================================== */
.infoBox {
  color: #FFFFFF;
  background-image: url(../images/bar-back.png);
  height: 30px;
  background-repeat: repeat-x;
  padding: 0.3em 0 0.3em 0.6em;
  margin-bottom: 1em;
  font-weight: bold;
  font-size: 1.2em;
}

.subtitle {
  padding-bottom: 5px;
  font-size: 14pt;
  font-weight: bold;
  color: #2884bf;
  margin-bottom: 10px;
  border-bottom: 1px solid #999999;
}

.jikken {
  padding-left: 0.5em;
  padding-top: 0.2em;
  font-size: 1.0em;
  font-weight: bold;
  color: #000;
  margin: 10px auto;
  text-align: left;
  border-left: 3px solid #000;
}

/* ========================================
   テキスト装飾
   ======================================== */
.slogan {
  margin-top: 1em;
  color: #f6960d;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.6;
}

/* フォントサイズ */
.font-s { font-size: 0.8em; }

/* カラー */
.orange { color: #f6960d; }

/* ユーティリティ */
.w-nowrap { white-space: nowrap; }
.txt-box {
  margin-bottom: 1.5em;
}

/* ========================================
   アイテムレイアウト
   ======================================== */
.flex {
  display: flex;
  justify-content: space-between;
}


/* ========================================
   セクション固有のスタイル
   ======================================== */

/*仕様*/
#shiyo li {
  font-size: 18px;
  line-height: 1.7;
}


/* 実験ボックス */
.jikken_box {
  display: block;
  padding: 1.0em 2em;
  width: 95%;
  background: white;
  box-shadow: 0 7px 10px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  border: solid 1px #e9e8e8;
  margin: 10px auto;
}

.jikken_box .flex img {
  margin-bottom: 10px;
}

.jikken_box .flex div:nth-child(2) img {
  margin: 25px 0 0 10px;
}

/* 動画 */
.l-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 20px 0 0;
}

/* ダウンロード */
#download .flex {
  justify-content: left;
  gap: 2em;
}



span.bikou {
  font-size: 0.8em;
}

/* ========================================
   お問い合わせ
   ======================================== */
.add {
  width: 100%;
  border: 1px solid #2781b5;
  padding: 0;
  margin: 10px auto;
  font-size: 1.0em;
}

h2.titletoi {
  font-size: 1.2em;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #2781b5;
  width: 100%;
  padding: 10px;
  margin: 0;
}

h3.adrs {
  font-size: 16pt;
  font-weight: 700;
  margin: 5px 0;
}

.adrs {
  text-align: center;
}

.adrs > span {
  font-weight: normal;
  font-size: 0.7em;
  display: block;
  margin-bottom: 5px;
}

.add p {
  text-align: center;
  padding: 0 1em;
}

/* ========================================
   ページトップへリンク
   ======================================== */
.to-top {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
  padding-bottom: 3px;
}















/* ========================================
   レスポンシブ: タブレット (768px以下)
   ======================================== */
@media screen and (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }

  body {
    width: 100%;
  }

  h1 img {
    max-width: 100%;
  }
  
  .wrapper {
    padding: 0 16px;
  }

  .menu-toggle {
		display: block;
		padding: 10px;
		background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
		border: 1px solid #ccc;
		border-bottom: 5px solid var(--accent);
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		user-select: none;
    color: var(--accent);
	}

	.menu-toggle::after {
		content: ' ▼';
		font-size: 0.8em;
	}

	.menu-toggle.active::after {
		content: ' ▲';
	}

	#globalnavi2 ul {
		display: none;
		flex-direction: column;
	}

	#globalnavi2 ul.active {
		display: flex;
	}

	#globalnavi2 li {
		width: 100%;
		border-left: none;
		border-top: 1px solid #ffffff;
	}

	#globalnavi2 li:first-child {
		border-top: none;
	}

	#globalnavi2 a {
		height: auto;
		line-height: 1.4;
		padding: 10px;
    font-size: 14px;
	}

  /* セクション */
  .l-wrapper {
    padding: 0.75em;
  }

  .l-wrapper > .flex {
    margin: 0;
  }
  
  /* アイテム */
  .flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .flex img {
    width: fit-content;
    margin: 0 auto;
    max-width: 100%;
  }

  .img-div img {
    margin-bottom: 1em;
  }

  

  /* 実験ボックス */
  .jikken_box .flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .jikken_box .flex div:nth-child(2) img {
    margin: 10px 0;
  }

  /* 見出し */
  .infoBox {
    letter-spacing: 0;
    padding: 8px;
  }
  .slogan {
    font-size: 1em;
    margin-bottom: 1em;
  }

  /*降雨実験*/
  #jikken .subtitle {
    margin: 16px 0 0;
    line-height: 1.6;
  }

  .transform {
    transform: rotate(90deg);
    height: fit-content;
  }

  /*仕様*/
  #shiyo li {
    font-size: 16px;
  }

  /* ダウンロード */
  #download .l-wrapper {
    gap: 16px;
  }

  /* 資料請求 */
  .shiryou {
    margin: 1.5em auto 0;
    float: none;
  }

  /* 新着情報 */
  .shintyaku-box {
    float: none;
    width: 100%;
  }

  /* 動画 */
  .l-wrapper iframe {
    display: block;
    width: 100%;
    margin: 20px 0 0;
  }
}

/* ========================================
   レスポンシブ: スマートフォン (600px以下)
   ======================================== */
@media screen and (max-width: 600px) {
  /* 新着情報 */
  .update-scroll-frame {
    max-width: 100%;
    height: 7em;
    margin-bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  dl.update-scroll dt {
    float: none;
    width: auto;
    margin: 0;
    padding-bottom: 0;
    font-weight: bold;
  }

  dl.update-scroll dd {
    margin-left: 0;
    padding-bottom: 5px;
  }

}

/* ========================================
   レスポンシブ: 小型スマートフォン (520px以下)
   ======================================== */
@media screen and (max-width: 520px) {
  img {
    max-width: 100%;
    height: auto;
  }

  .jikken_box {
    width: 100%;
    padding: 0.75em 1em;
  }
}

/* ========================================
   レスポンシブ: 極小デバイス (480px以下)
   ======================================== */
@media screen and (max-width: 480px) {
  .wrapper {
    padding: 0 12px;
  }

  .infoBox {
    height: auto;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

}

/* ========================================
   レスポンシブ: デスクトップ (800px以上)
   ======================================== */
@media screen and (min-width: 800px) {
  .l-wrapper iframe {
    display: block;
    width: 90%;
    margin: 20px auto 0;
  }
}