@charset "UTF-8";

/* ----------
searchBox
---------- */
.searchBox{
  width:100%;
  max-width:920px;
  margin-bottom:50px;
}

.searchBox .inner{
	width:100%;
	margin: 0 auto;
}

/* ---- */
.searchBox .inner .searchBox__tit{
	display:inline-block;
	background:#fff url(../img/searchBox_searchicon01.png) no-repeat 15px center;
	padding:15px 15px;
	padding-left:50px;
	color:#2D6540;
	font-weight:bold;
}

.searchBox .inner .searchBox__innerContent{
  padding: 20px;
  background: #fff;
}

/* ---- tab menu ---- */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu{
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* li */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item{
  display: flex;
  align-items: center;
  position: relative; /* ::before / ::after の基準 */
}

/* 文字高さ分だけの縦セパレーター（liの右端に描く） */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;                 /* 右端 */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.6em;            /* 文字高さ分 */
  background: #c9d4cf;
  z-index: 2;
}

/* （元の名残対策） */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item:last-child{
  border-right: none;
}

/* withHelp（最後のタブ）
   ★ここを「space-between」から「左寄せ」に変更して、helpを寄せる */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item--withHelp{
  flex: 1;
  min-width: 0;

  justify-content: flex-start; /* ★寄せる */
  gap: 14px;                   /* ★タブとhelpの距離（好みで調整） */
}

/* span（タブ本体） */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: clamp(13.0000px, calc(0.7813vw + 7.0000px), 15.0000px);
  color: #222222;
  background: transparent;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  z-index: 3;
}

/* ===== アクティブ表現：背景＋上ラインの“当て先”は searchBox__tab ===== */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item .tabMenu_button_inner{
  display: block;
  width: 100%;
  margin: 0;
  position: relative;

  padding: 0 8px;           /* 左右ガター（線と背景の干渉を防ぐ） */
  box-sizing: border-box;
}

/* アクティブ：背景＋文字色 */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item.is-active .tabMenu_button_inner .searchBox__tab{
  background: #E6F0E7;
  color: #2D6540;
}

/* アクティブ：上ライン（基本） */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item.is-active .tabMenu_button_inner .searchBox__tab::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: #2D6540;
  z-index: 1;
}

/* ★重要：手前2つ（withHelp以外）の上ラインだけ内側に入れて縦線に被らせない */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item:not(.searchBox__tabMenu__item--withHelp).is-active
.tabMenu_button_inner .searchBox__tab::before{
	/*
  left: 8px;
  right: 8px;
  */
}

/* =========================================================
   withHelp の場合だけ：tabMenu_button_inner を“中身幅”にして
   help 側に背景・上ラインが伸びないようにする
   ========================================================= */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item--withHelp > .tabMenu_button_inner{
  width: auto;
  display: inline-block;
  flex: 0 0 auto;

  padding: 0;              /* 中身幅にしたいので左右ガターは外す */
  margin-left: 8px;        /* 左の縦線との隙間（必要なら調整） */
}

/* 「まとめて検索」のサイズ調整（任意・現状維持） */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item--withHelp .searchBox__tab{
  font-size: clamp(13.0000px, calc(0.7813vw + 7.0000px), 15.0000px);
}

/* ---- help button ---- */
.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__help{
  margin-left: auto; /* 通常は右寄せ */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 8px;
  margin-right: 10px;
  border: 1px solid #2f6b52;
  color: #2f6b52;
  text-decoration: none;
  border-radius: 2px;
  background: #fff;
  white-space: nowrap;
  font-size: clamp(13.0000px, calc(0.7813vw + 7.0000px), 15.0000px);
}

/* ★withHelpの時だけ：margin-left:auto を無効化して“寄せる” */
.searchBox .inner .searchBox__innerContent
.searchBox__tabMenu .searchBox__tabMenu__item--withHelp .searchBox__help{
  margin-left: 0;   /* ★寄せる */
  margin-right: 0;  /* 右余白も不要なら0（必要なら10pxに戻してOK） */
}

.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__help .searchBox__helpIcon{
  width: 20px;
  height: 20px;
  background:url(../img/searchBox_question.png) no-repeat center center;
  background-size:auto 100%;
}

/* ---- tab contents ---- */
.searchBox .inner .searchBox__innerContent .searchBox__tabContents{
  padding: 20px 15px;
  min-height:125px;
}

.searchBox .inner .searchBox__innerContent .searchBox__tabContents .searchBox__tabPanel{
  min-height: 1px;
}

/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .example {
    width: calc(100% - 30px);
  }
}

/* SP */
@media screen and (max-width: 767px) {

  /* 3タブを確実にコンテナ幅に収める */
  .searchBox .inner .searchBox__innerContent .searchBox__tabMenu{
    width: 100%;
  }

  .searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item{
    flex: 1 1 1;
    min-width: 0;              /* ★これが重要：中身があっても縮められる */
	width:33.33%;
  }
	.searchBox .inner .searchBox__innerContent
	.searchBox__tabMenu .searchBox__tabMenu__item--withHelp > .tabMenu_button_inner{
		margin-left:0;
		width: 100%;
		min-width: 0;
	}
  /* タブの中身も縮められるように */
  .searchBox .inner .searchBox__innerContent
  .searchBox__tabMenu .tabMenu_button_inner{
    width: 100%;
    min-width: 0;
  }
	.searchBox .inner .searchBox__innerContent{
	  padding: 10px 5px;
	}

  /* 文字を折り返して収める（見本②の2行表示に寄る） */
  .searchBox .inner .searchBox__innerContent
  .searchBox__tabMenu .searchBox__tab{
    white-space: normal;       /* 折り返しOK */
    word-break: break-word;
    text-align: center;

    padding: 10px 8px;         /* ★少し詰める（はみ出し防止） */
    line-height: 1.2;
  }

  /* iOS Safari対策：極端に長い場合でも横スクロールさせない */
  .searchBox .inner .searchBox__innerContent{
    overflow-x: hidden;
  }
	.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__tab{
	  padding: 8px 0px;
	  white-space: normal;
	  width:100%;
	}
	.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__help{
		display:none;
	}
	.searchBox .inner .searchBox__innerContent
	.searchBox__tabMenu .searchBox__tabMenu__item .tabMenu_button_inner{

	  padding: 0 4px;
  }
	.searchBox .inner .searchBox__innerContent .searchBox__tabContents{
	  min-height:auto;
	}
}

/* SP */
@media screen and (max-width: 400px) {
	.searchBox .inner .searchBox__innerContent .searchBox__tabMenu .searchBox__tabMenu__item .searchBox__tab{
		font-size:12px;
	}
}







/* =================================
 *
 * ================================= */
/* root */
.searchBox__searchForm form {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  border: 2px solid #2D6540;
  background: #fff;

  /* 画像は角が立って見えるので基本0、必要なら 4px などに変更 */
  border-radius: 0;

  /* 高さはお好みで調整 */
  height: 48px;

  /* 枠に対して中身がくっつかないように */
  padding-left: 16px;
}

/* input */
.searchBox__searchForm input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;

  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  height: 100%;

  /* 右側（区切り線付近）に余白 */
  padding: 0 12px 0 0;
}

.searchBox__searchForm input[type="text"]::placeholder {
  color: #9a9a9a; /* 近い見た目用。必要なら調整 */
}

/* button */
.searchBox__searchForm button[type="submit"] {
  flex: 0 0 auto;
  height: 100%;
  width: 56px;

  border: 0;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  padding: 0;
}

/* 右側ボタンの左にある縦線（上下にくっつかない） */
.searchBox__searchForm button[type="submit"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;      /* ここを増やすほど上下が空く */
  bottom: 8px;   /* ここを増やすほど上下が空く */
  width: 1px;
  background: #D9D9D9;
}

/* icon */
.searchBox__searchForm button[type="submit"] img {
  width: 18px;   /* アイコンに合わせて調整 */
  height: 18px;
  display: block;
}

/* focus（任意：アクセシビリティ） */
.searchBox__searchForm input[type="text"]:focus {
  outline: none;
}
.searchBox__searchForm button[type="submit"]:focus-visible {
  outline: 2px solid rgba(45, 101, 64, 0.35);
  outline-offset: 2px;
}



.searchBox__tabContents__comment{
	font-size:13px;
}
.searchBox__tabContents__comment a{
	color:#2D6540;
	text-decoration:underline;
}

/* SP */
@media screen and (max-width: 767px) {
	.searchBox__tabContents__comment a{
		display:block;
	}
}

/* --------------------------------
  searchBox__searchForm02 版（uquery専用）
-------------------------------- */

/* ----------
searchBox__searchForm02
   ---------- */
.searchBox__searchForm02 {
}

/* form */
.searchBox__searchForm02 form {
}
.searchBox__searchForm02 form .searchFormContent{
	display:flex;
	gap:5px;
	flex-wrap:wrap;
}
/* ---- */
.searchBox__searchForm02 .searchForm02__param {
	width:43%;
}

.searchBox__searchForm02 .searchForm02__param p {
}

.searchBox__searchForm02 .searchForm02__param ul.searchForm02__param_radios {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.searchBox__searchForm02 .searchForm02__param ul.searchForm02__param_radios li {
	flex:1 1;
	font-size:14px;
}

.searchBox__searchForm02 .searchForm02__param ul.searchForm02__param_radios li label {
}

.searchBox__searchForm02 .searchForm02__param ul.searchForm02__param_radios li label input[type="radio"] {
}

/* ---- */
.searchBox__searchForm02 .searchForm02__inputother {
	width:calc(100% - (43% + 5px));
}

/* input + button を包む要素（このHTMLでは .inputArea） */
.searchBox__searchForm02 .searchForm02__inputother .inputArea {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  border: 2px solid #2D6540;
  background: #fff;
  border-radius: 0;

  height: 48px;
}

/* input */
.searchBox__searchForm02 input[name="uquery"] {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;

  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  height: 100%;
  padding: 0 12px 0 16px; /* 左余白を確保 */
}

.searchBox__searchForm02 input[name="uquery"]::placeholder {
  color: #9a9a9a;
}

/* button */
.searchBox__searchForm02 .searchForm02__inputother .inputArea > button[type="submit"] {
  flex: 0 0 auto;
  height: 100%;
  width: 56px;

  border: 0;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  padding: 0;
}

/* 区切り線（上下にくっつかない） */
.searchBox__searchForm02 .searchForm02__inputother .inputArea > button[type="submit"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #D9D9D9;
}

/* icon */
.searchBox__searchForm02 .searchForm02__inputother .inputArea > button[type="submit"] img {
  width: 18px;
  height: 18px;
  display: block;
}

/* img（セクション内に<img>があるため必須） */
.searchBox__searchForm02 img {
}

/* focus（任意） */
.searchBox__searchForm02 input[name="uquery"]:focus {
  outline: none;
}

.searchBox__searchForm02 .searchForm02__inputother .inputArea > button[type="submit"]:focus-visible {
  outline: 2px solid rgba(45, 101, 64, 0.35);
  outline-offset: 2px;
}

/* ---- */
.searchBox__searchForm02 .searchForm02__inputother .otherArea {
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	align-items:flex-start;
}

.searchBox__searchForm02 .searchForm02__inputother .otherArea span.otherArea__tit {
	width:calc( 100% - ( 80px + 120px + ( 5px + 5px)) );
	font-size:13px;
}

.searchBox__searchForm02 .searchForm02__inputother .otherArea a {
	display:block;
	background:#2D6540;
	color:#fff;
	padding:3px 3px;
	text-align:center;
	font-size:13px;
}
.searchBox__searchForm02 .searchForm02__inputother .otherArea a.otherArea__btn01 {
	width:80px;
}
.searchBox__searchForm02 .searchForm02__inputother .otherArea a.otherArea__btn02{
	width:120px;
}
.searchBox__searchForm02 .searchForm02__inputother .otherArea a.otherArea__btn02 span{
	background-image:url(../img/searchBox_otherlnk.png);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:15px auto;
	padding-left:25px;
}
.searchBox__searchForm02 .searchForm02__inputother .otherArea a:hover {
	background-color:#2B2B2B;
}
.searchBox__searchForm02 .searchForm02__inputother .otherArea a .icon_blank {
}

/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .example {
    width: calc(100% - 30px);
  }
}

/* SP */
@media screen and (max-width: 767px) {
	.searchBox__searchForm02 form .searchFormContent{
		display:flex;
		gap:5px;
		flex-wrap:wrap;
	}
	/* ---- */
	.searchBox__searchForm02 .searchForm02__param {
		width:100%;
	}
	/* ---- */
	.searchBox__searchForm02 .searchForm02__inputother {
		width:100%;
	}
	.searchBox__searchForm02 .searchForm02__inputother .otherArea span.otherArea__tit {
		width:100%;
		margin-bottom:10px;
	}
	.searchBox__searchForm02 .searchForm02__inputother .otherArea a.otherArea__btn01 ,
	.searchBox__searchForm02 .searchForm02__inputother .otherArea a.otherArea__btn02{
		width:calc( 50% - 3px);
	}
}