@charset "UTF-8";
/* CSS変数の宣言 */
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
.br {
  white-space: nowrap;
}

.br::before {
  content: "\A";
  white-space: pre;
}
/* ================================================
   特定歴史公文書専用CSS
   ================================================
/* ------------------------------------------------
   1. ページタイトル
   ------------------------------------------------ */
.sub-page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin: 3rem 0 2rem;
  color: #333;
}

@media (max-width: 575px) {
  .sub-page-title {
    font-size: 2rem;
    margin: 2rem 0 1.5rem;
  }
}


/* ------------------------------------------------
   2. 説明文
   ------------------------------------------------ */
.sub-description {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #333;
}


/* ------------------------------------------------
   3. 検索ボックス（ヘッダースタイル流用）
   ------------------------------------------------ */
.sub-search-area {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.sub-search-box {
  position: relative;
  flex: 1;
  max-width: 600px;
}

.sub-search-box label {
  display: block;
}

.sub-search-box input {
  width: 100%;
  padding: 0.8rem 3.5rem 0.8rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 1rem;
  box-sizing: border-box;
}

.sub-search-box input:focus {
  outline: 2px solid var(--accentColor);
  outline-offset: 2px;
}

.sub-search-box button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background-color: var(--accentColor);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

.sub-search-box button:hover {
  opacity: 0.8;
}

.sub-search-link {
  white-space: nowrap;
  color: #0066cc;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid #0066cc;
  transition: opacity 0.3s;
}

.sub-search-link:hover {
  opacity: 0.7;
}

/* レスポンシブ：検索ボックスを縦並びに */
@media (max-width: 575px) {
  .sub-search-area {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .sub-search-box {
    max-width: 100%;
  }

  .sub-search-link {
    text-align: center;
  }
}

/* ------------------------------------------------
   6. list-design6の画像枠線追加/古文書
   ------------------------------------------------ */
#timeline-section .item img,
#photo-section .item img {
  border: 2px solid var(--borderColor);
  padding: 1rem;
  box-sizing: border-box;
}

.list-design6 .item {
  width:70%;
    max-height:400px;
  margin:0 auto;
  border: none;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

.list-design6 .item img{
  width:100%;
  height:100%;
  object-fit: contain;
    overflow: hidden;
}

@media  (max-width: 767.99px) {
  .list-design6 .item {
    width:95%;
  }
}

/*古地図にリンクボタン追加*/
.link-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:1em auto;
  width:70%;
  gap:2em;
}

/*.link-btn li {
  text-align: center;
}*/

.link-btn li a {
  background: var(--accentColor);
  border:solid 1px var(--accentColor);
  background: #545454;
  border:solid 1px #545454;
  color:#fff;
  font-size:1.1em;
  text-align: center;
  padding:.5rem 1rem;
  white-space: nowrap;
  border-radius: 4px;
  text-decoration: none;
}

.link-btn li a:hover {
  background: #fff;
  color:var(--accentColor);
  border:solid 1px var(--accentColor);
  transition: all .5s ease-in-out;
}

/* ------------------------------------------------
   7. list-design5のボタンスタイル調整（年度別）
   ------------------------------------------------ */
#document .item a {
  background-color: var(--accentColor);
  color: white;
  padding: 1.5rem 2rem;
  display: block;
  text-align: center;
  transition: opacity 0.3s;
  text-decoration: none;
}


#document .item p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

/* レスポンシブ：ボタンサイズ調整 */
@media (max-width: 575px) {
  #document .item a {
    padding: 1.2rem 1.5rem;
  }

  #document .item p {
    font-size: 1rem;
  }
}


/* 見出しを中央寄せにする */
h3.section-title {
  text-align: center;
}

/* 検索ウィンドウ
#search-document-keyword,
#search-history-keyword{
  width: 100%;
  height: 45px;
  padding: 0.5rem 1rem;
  border: 2px solid #262626;
}
#search-document-keyword::placeholder,
#search-history-keyword::placeholder{
  color: #888888;
}


@media (max-width:575px) {
#search-document-keyword,
#search-history-keyword{
        padding:0 0.5rem;
    }

    #search-document-keyword::placeholder,
    #search-history-keyword::placeholder{
     font-size:80%;
     white-space:normal;
      margin:0;
    }
} */


/*=====sub-page=====*/


/* ------------------------------------------------
   1. h2タイトルをtop-image上に移動
   ------------------------------------------------ */

.top-image {
  position: relative;
}

.top-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .5) 30%, transparent);
  display: block;
}

.top-image h2 {
  position: absolute;
  color: #fff;
  z-index: 999;

}

/*.top-image h2.jp {*/
.top-image h2 {
  left: 0;
  bottom: 35%;
  font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.9));
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
}

/* ------------------------------------------------
   2. h3共通スタイルfilter色分け
   ------------------------------------------------ */

/*h3を揃える*/
#index-type1 [class^="list-design"] h3,
#index-type1 .container h3 {
  position: relative;
  margin: 0 auto;
  padding: 0;
  margin-top: 4rem;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

#index-type1 h3::after {
  position: absolute;
  content: "　";
  top: -2rem;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  width: 90px;
  background-image: url(../images/Emblem_of_Izumi.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/*h3上部市章を各項目で色分け_bodyのIDでfilterをかけて色指定*/
/*https://angel-rs.github.io/css-color-filter-generator/*/

/*臙脂-#871807*/
#document h3::after {
  filter: invert(25%) sepia(7%) saturate(6937%) hue-rotate(326deg) brightness(99%) contrast(93%);
}

/*紫-#7727c7*/
#history h3::after {
  filter: invert(16%) sepia(60%) saturate(5501%) hue-rotate(268deg) brightness(92%) contrast(90%);
}

/*黄緑-#27c787*/
#ancientdocuments h3::after {
  filter: brightness(0) saturate(100%) invert(87%) sepia(98%) saturate(3153%) hue-rotate(75deg) brightness(87%) contrast(76%);
}

@media screen and (max-width:575px) {
  #index-type1 h3::before {
    position: absolute;
    top: -5rem;
    line-height: 1.0;
  }
}

p.intro-txt {
  text-indent: 1em;
}

/*introに利用規定追加*/
.intro-container a {
  display: inline-block;
  padding: 0.1% 0.8% !important;
 /* margin-top:-1em;*/
  text-decoration: none;
  border: solid 1px #7c7c7c;
  text-align: left;
  line-height:1.8;
  text-indent:0;
}

.intro-container a:hover {
  background: #7c7c7c;
  color:#fff;
  transition: all .5s ease-in-out;
}

/*itemの共通デザイン部分*/
[class^="list-design"] .item,
.list-design5 li a {
  overflow: hidden;
  border: none;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

/*list-design6はshadowナシ*/
.list-design6 .item {
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* ------------------------------------------------
   3. 特定歴史公文書
   ------------------------------------------------ */

/*変遷図埋め込みサイズ調整*/
#kiko .contents-wrap>div {
  width: 90%;
  aspect-ratio: 16 / 9;
}

/*変遷図SP非表示*/
@media (max-width: 767.99px) {
  #kiko .contents-wrap>div {
    display: none;
  }
}

/*移管年度別に資料をみるボタン配列*/

#document .list-design5 ul.contents-wrap {
  justify-content: center;
}

/*分野別等list-design5ボタンデザイン*/
#document .list-design5 a {
  /*background-color: var(--accentColor);*/
  background: #fff;
  border: solid 1px var(--accentColor);
  color: #262626;

}

#document .list-design5 a:hover {
  background: var(--accentColor);
  color: #fff;
  transition: all 0.5s ease;
}


#document .item p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

/* レスポンシブ：ボタンサイズ調整 */
@media (max-width: 575px) {
  #document .list-design5 a {
    padding: 1.2rem 1.5rem;
  }

  #document .list-design5 p {
    font-size: 1rem;
  }
}

/*変遷図ボタン*/
ul.inversion-btn a {
  display: grid;
  place-items: center;
  min-height: 80%;
  margin: 1.5rem 0.5rem 1.5rem;
  font-size: 1.2rem;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.5;
  background: #fff;
  border: solid 1px var(--accentColor);
  color: #262626;
  padding-left: 1.5em;
  padding-right: 1.5em;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

ul.inversion-btn a:hover {
  background: var(--accentColor);
  color: #fff;
  transition: all 0.5s ease;
}

/* ------------------------------------------------
   3-2. list-designのデザイン調整
   ------------------------------------------------ */
p.list-txt, p.list-txt span {
  text-indent: 1em;
  }
/*改行字下げ*/
.chuki {
text-indent: 1em;
font-size:.9em;
}
.chuki::after, p.list-txt span::after {
  content:"\A";
  white-space:pre;
 }

@media (min-width: 1000px) {
  [class^="list-design"].column2 .item {
    width: calc(100% / 2 - 4rem);
    margin: 1rem 2rem;
  }
}

@media (max-width:575px) {
  .list-design3 .item {
    display: block;
    width: 80%;
    margin: 1.5rem auto;
  }

  .list-design3 .item img {
    transition: transform .6s ease;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 200px;
    max-width: 500px;
  }
}

.list-design3 .item>h4 {
  text-align: center;
  background: rgba(var(--accentColorRGB), 0.4);
}

.list-design3 .item>h4 a {
  text-decoration: none;
}

@media (max-width:575px) {
  .list-design5 .contents-wrap {
    justify-content: center;
    align-items: center;
  }

  .list-design5 .contents-wrap li {
    margin: 0 auto;
  }

  .list-design5 .item {
    display: block;
    width: 80%;
    margin: 1.5rem auto;
  }
}

/*-----------------------------------------------
  3-3. サブページ検索窓デザイン
   ------------------------------------------------ */
/* 検索ウィンドウ */
#search-document-keyword,
#search-history-keyword {
  width: 100%;
  height: 45px;
  padding: 0.5rem 1rem;
  border: 1px solid #696969;
  border-radius: 50px 0 0 50px;
  box-shadow: 0px 4px 6px 0px #c4c4c4;
}

#search-document-keyword::placeholder,
#search-history-keyword::placeholder {
  color: #888888;
}

#search-center-box>button {
  /*  width: 50px;
  height: 45px;
  background: #262626;
  border: 1px solid #262626;
  cursor: pointer;*/
  width: 15%;
  /*ボタン部分の長さ*/
  background: #444d53;
  /*ボタン部分の背景色*/
  color: #fff;
  /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px;
  /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px;
  /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0;
  /*右上、右下のみ角丸*/
  padding: 0;
}

#search-center-box>button::after {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  content: "";
  background: url("../images/common/magnifier_icon.png");
  background-repeat: no-repeat;
  background-size: contain;
}


@media (max-width:575px) {

  #search-document-keyword,
  #search-history-keyword {
    padding: 0 0.5rem;
  }

  #search-document-keyword::placeholder,
  #search-history-keyword::placeholder {
    font-size: 80%;
    white-space: normal;
    margin: 0;
  }
}

/*-----------------------------------------------
   4. 地域資料文化財
   ------------------------------------------------ */

/*資料に親しむ*/
.list-design4.column2 .item {
  overflow: hidden;
  /*width: calc(100% / 2 - 1rem);*/
  width: calc(100% / 2 - 4rem);
  border: solid 1px #EBEBEB;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}

.list-design4.column2 .contents-wrap {
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.list-design4 .item>h4 {
  text-align: center;
  background: rgba(var(--accentColorRGB), 0.4);
}

.list-design4 .item>h4 a {
  text-decoration: none;
}

.list-design4 .item>h4:hover {
  background: var(--accentColor);
  color: #fff;
  transition: all 0.5s ease-in-out;
  /*pointer-events: none;
 background: rgba(var(--backgroundColor));*/
}

.list-design4 .item>h4:hover a {
  color: #fff;
  transition: all 0.5s ease-in-out;
}

/*資料に親しむの文章背景黒*/
.list-design4.column2 .item p {
  background: #262626;
  color: #fff;
  height: 100%;
}

.list-design4.column2 .item img {
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  /* height: 30%;
  min-height: 240px;
  max-height: 320px;*/
  height: auto;
  min-height: 150px;
  max-height: 240px;
  transition: transform .6s ease;
}

/*種類別に資料をみる */
[class^="list-design1"].column5 .item {
  overflow: hidden;
  /* width: calc(100% / 5 - 1rem );*/
  height: 100%;
  width: calc(100% / 5 - 2rem);
  margin: 1.0rem;
  border: none;
  -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}


[class^="list-design1"].column5 .item p {
  top: 22%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  display: inline-block;
  width: 8em;
  height: 2em;
  min-height: 2em;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.0;
  background: transparent;
  background: rgba(0, 0, 0, .6);
  z-index: 11;
}

@media (max-width:999px) {
  [class^="list-design1"].column5 .item {
    width: calc(100% / 2 - 2rem);
    margin: 1.5rem 1rem;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width:575px) {
  .list-design1>.contents-wrap {
    display: block;
  }

  [class^="list-design1"].column5 .item {
    width: 90%;
    aspect-ratio: 3 / 1;
    margin: 1rem auto;
  }

  [class^="list-design1"].column5 .item p,
  .font-xl .item p,
  .font-l .item p {
    top: 40%;
    min-height: 2rem;
    line-height: 1;
  }
}


/*-----------------------------------------------
   99. footer
   ------------------------------------------------ */
footer {
  background: var(--accentColor);
  color: #fff;
  margin-top: 0;
}

footer a,
#footer-links {
  color: #fff;
}