@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");


/*エラー、OK、注意書き
--------------------------------------------------------*/
.err{background: #ffecec;color:#a10000;padding: 0.5rem;}
.ok{background: #e4f2fd;color:var(--secondary-color);padding: 0.5rem;}
.notice{background: #ff0000;color:#fff;display: inline-block;padding: 0 0.5rem;margin-bottom: 2rem;}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
--------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(0,0,0,0.8);
	color: #ccc;
	text-align: right;
	padding: 0.2rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: bold;
	margin-right: 0.5em;
}


/*NEW、UPアイコン
--------------------------------------------------------*/
.new-icon, .up-icon {
  font-size: 0.8rem;
  display: inline-block;
  border-radius: 3px;
  padding: 0 0.2rem;
}
.new-icon {
  background: #cc2701;
  color: #fff;
}
.up-icon {
  background: #659efb;
  color: #fff;
}
.list-tpcms h4 a {
  margin-right: 0.2rem;
}


/*list-tpcms-grid（グリッドレイアウト）
---------------------------------------------------------------------------*/
/*ブロック全体を囲むブロック*/
.list-tpcms-grid {
	display: grid;
  grid-template-columns: repeat(4, 1fr);  /*4列*/
  gap: 1rem;
  margin-bottom: 2rem;
}
/*ブロック幅が1000px未満で２列に*/
.list-tpcms-grid.window-s {
  grid-template-columns: repeat(2, 1fr);
}
/*ボックス１個あたり*/
.list-tpcms-grid .list-tpcms {
  display: grid;
	position: relative;
	padding: 1rem;
	background: #fff;
	color: #555;
  grid-template-rows: auto 1fr;	
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
}
/*ボックス内のh4*/
.list-tpcms-grid h4 {
  margin: 0 0 0.4rem;
}
/*ボックス内のp要素*/
.list-tpcms-grid .list-tpcms p {
	font-size: 0.85rem;
	line-height: 1.5;
}
/*ボックス内のfigure画像*/
.list-tpcms-grid .list-tpcms figure img {
	margin-bottom: 0.5rem;
}


/*list-tpcms-row（横長レイアウト）
---------------------------------------------------------------------------*/
.list-tpcms-row {
  margin-bottom: 2rem;
}
/*ボックス１個あたり*/
.list-tpcms-row .list-tpcms {
	display: flex;
	gap: 2vw;
	margin-bottom: 1rem;
}
/*テキストブロック*/
.list-tpcms-row .text {
	flex: 1;
}
/*画像ブロック*/
.list-tpcms-row figure {
	width: 30%;
}
/*h4見出し*/
.list-tpcms-row h4 {
	margin: 0;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}
/*説明テキスト*/
.list-tpcms-row p {
	margin: 0;	
}


/*一覧ブロック内のtableっぽく見える所
---------------------------------------------------------------------------*/
dl.tpcms-dl-table {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, auto 1fr);
	font-size: 0.85rem;
	border-top: 1px solid #ddd;
}
/*グリッドレイアウトで文字サイズをもっと小さく*/
.list-tpcms-grid dl.tpcms-dl-table {
	font-size: 0.75rem;
}
dl.tpcms-dl-table dt, dl.tpcms-dl-table dd {
	border-bottom: 1px solid #ddd;
	padding: 0 0.2rem;
}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {

  dl.tpcms-dl-table {
    grid-template-columns: auto 1fr;
  }

	}/*追加指定ここまで*/

/*詳細ページ*/
body.detail article dl.tpcms-dl-table {
  font-size: 1rem;
	grid-template-columns: auto 1fr;
}
body.detail article dl.tpcms-dl-table dt, body.detail article dl.tpcms-dl-table dd {
	padding: 0.5rem 0;
}
body.detail article dl.tpcms-dl-table dt {
  padding-right: 2rem;
}


/*検索ブロック
---------------------------------------------------------------------------*/
/* ---------- Search (共通) ---------- */
.tpcms-search {
  --tpcms-border: #ddd;
  --tpcms-text: #222;
  --tpcms-muted: #666;
  --tpcms-bg: #fff;
  --tpcms-filter-bg: #fafafa;
  --tpcms-radius: 3px;
  --gap: .75rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  align-items: end;
  margin: 1rem 0;
  color: var(--tpcms-text);
}

.tpcms-search input[type="search"],
.tpcms-search select {
  width: 100%;
  height: 2.6rem;
  padding: 0 .8rem;
  border: 1px solid var(--tpcms-border);
  border-radius: var(--tpcms-radius);
  background: var(--tpcms-bg);
  font-size: .95rem;
  line-height: 1;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tpcms-search input[type="search"]::placeholder {
  color: #999;
}

.tpcms-search input[type="search"]:focus,
.tpcms-search select:focus,
.tpcms-search button:focus {
  outline: none;
  border-color: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* ボタン */
.tpcms-search button[type="submit"] {
  height: 2.6rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--tpcms-radius);
  background: #222;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.tpcms-search button[type="submit"]:hover { filter: brightness(1.08); }

.tpcms-search .tpcms-reset {
  height: 2.6rem;
  padding: 0 1rem;
  border: 1px solid var(--tpcms-border);
  border-radius: var(--tpcms-radius);
  background: transparent;
  color: var(--tpcms-text);
  cursor: pointer;
}

/* 結果件数 */
.tpcms-result-count {
  grid-column: 1 / -1;
  margin: .25rem 0 0;
  font-size: .95rem;
  color: var(--tpcms-muted);
}

/* sr-only のフォールバック（無ければ有効化） */
.tpcms-search .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Filters (select/radio/checkbox) ---------- */
.tpcms-filters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
}

.tpcms-filter {
  border: 1px solid var(--tpcms-border);
  border-radius: var(--tpcms-radius);
  background: var(--tpcms-filter-bg);
  padding: .75rem .75rem .6rem;
}

.tpcms-filter legend {
  font-size: .9rem;
  font-weight: 600;
  color: var(--tpcms-muted);
  padding: 0 .2rem;
  margin-bottom: .4rem;
}

.tpcms-filter select {
  width: 100%;
  height: 2.4rem;
  border: 1px solid var(--tpcms-border);
  border-radius: 10px;
  background: var(--tpcms-bg);
  padding: 0 .6rem;
}

.tpcms-filter label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .2rem .8rem .2rem 0;
  font-size: .9rem;
  cursor: pointer;
}

/* チェックボックスの視認性（対応ブラウザではアクセント色を環境に馴染む無彩色に） */
.tpcms-filter input[type="checkbox"] {
  accent-color: #444;
}

/* ---------- レスポンシブ微調整 ---------- */
@media (max-width: 640px) {
  .tpcms-search { grid-template-columns: 1fr; }
  .tpcms-filters { grid-template-columns: 1fr; }
  .tpcms-search button[type="submit"],
  .tpcms-search .tpcms-reset { width: 100%; }
}

/* 中央寄せのアクション行 */
.tpcms-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin-top: .25rem;
}

@media (max-width: 640px){
  .tpcms-actions{
    flex-direction: column;
  }
  .tpcms-actions > *{
    width: 100%;
  }
}


/*ページャー
---------------------------------------------------------------------------*/
.pager {
    clear: both;
	  text-align: center;
}
/*余白の一括管理*/
.pager a,
.pager span {
	  margin: 2px;
	  padding: 0.5rem 1rem;
    border: 1px solid #ccc;
}
.pager a {
	  display: inline-block;text-decoration: none;
}
.pager a:hover {
    border: 1px solid #333;
}
/*最初と最後のボタン*/
.pager span:first-child,.pager span:last-child {
    color: #333;
    border: 1px solid #ccc;
    background: #fff;
}
/*リンクのないボタン*/
.pager span {
    display: inline-block;
    color: #999;
    border: 1px solid #ccc;
    background: #f0f0f0;
}


/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;
	margin: 0 auto 1rem;
	text-align: center;
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;
  flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 2rem;
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
}
.thumbnail-parts img:hover {
	opacity: 0.8;
}
/* 大きな表示の中身（画像/動画） */
.thumbnail-view-parts img,
.thumbnail-view-parts video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* サムネイル動画 */
.thumbnail-parts video {
  width: 100px;
  margin: 2px;
  cursor: pointer;
  transition: 0.3s;
}
.thumbnail-parts video:hover {
  opacity: 0.8;
}
/* 動画サムネ用ラッパ＆アイコン */
.thumbnail-parts .thumb-wrap {
  position: relative;
  display: inline-block;
  width: 100px;      /* 既存サムネ幅と合わせる */
  margin: 2px;       /* 既存サムネ間隔と合わせる */
}
.thumbnail-parts .thumb-wrap > video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;         /* 二重余白を防止 */
}
.thumbnail-parts .thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;      /* クリックは下のvideoに通す */
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.thumbnail-parts .thumb-play i {
  background: #ff0000;
  color: #fff;
  border-radius: 9999px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1;
}


/*詳細ページのGoogleMap
---------------------------------------------------------------------------*/
.map-area {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
  margin-top: 2rem;
}
.map-area iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*詳細ページのお問い合わせフォーム
---------------------------------------------------------------------------*/
.tpcms-contact {
  margin-top: 5rem;
}
body.detail input[type=search],
body.detail input[type=text],
body.detail input[type=email],
body.detail input[type=tel],
body.detail input[type=number],
body.detail input[type=file],
body.detail textarea,
body.detail select,
body.detail input[type="password"]{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:8px;
  font:inherit;
}
body.detail select {width: auto;display: block;}
body.detail textarea{min-height:100px}
body.detail fieldset {
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius:8px;
  font:inherit;
}

/*お問い合わせフォームの見出し下に出るデータタイトル*/
body.detail .form-title {
  background: #d1effc;
  padding: 0.5rem;
  display: inline-block;
}

/*「送信する」ボタン*/
.btn-submit {
  /* 色 */
  --btn-bg: #e53935;
  --btn-bg-hover: #ff4440;
  --btn-bg-active: #c62828;
  --btn-text: #fff;

  -webkit-appearance: none; /* iOSのデフォルト外観を無効化 */
  appearance: none;
  background-image: none;   /* iOSのグラデを無効化 */
  border: none;

  background-color: var(--btn-bg);
  color: var(--btn-text);
  font-size: 1.125rem;      /* ほんの少し大きめ */
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75em 2em;
  border-radius: 8px;
  min-height: 44px;         /* タップしやすさ */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-submit:hover { background-color: var(--btn-bg-hover); }
.btn-submit:active { background-color: var(--btn-bg-active); transform: translateY(1px); }
.btn-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(229, 57, 53, .4); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }


/*その他
---------------------------------------------------------------------------*/
/*「XX件ヒット」の文字*/
.tpcms-result-count {
  margin-bottom: 1rem;
  text-align: center;
}
.mt4rem {margin-top: 4rem;}


/*以下、テンプレ専用css
---------------------------------------------------------------------------*/
/*お知らせの日付横に余白*/
.new dt {
	width: 8em !important;
}
/*ドロップダウンの親のカーソル形状*/
a[onclick="return false;"] {
  cursor: default;
  text-decoration: none;
  color: inherit;
}