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

main.subpage{
  background-color: #fcf1e5;
}


p a{color:#800080;}

/* ぱんくず */

.breadcrumb li:first-child::before {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    background-image: url(../images/tkrzk/icon_home.png);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    content: '';
}

main > h2{
  width:100%;
  max-width:1280px;
  margin: 0 auto;
  padding:0;
  padding-top:2rem;
  font-size: 3rem;
  color:#262626;
  line-height:0;
}

#intro > .intro-container{
  width:100%;
  max-width:1024px;
  margin:1rem auto;
  padding: 0 2rem;
  display:block;
}

#intro > .intro-container > .intro-txt{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sentence{
border-radius: 30px;
border:10px solid #fff;
background-color:#F5F5F5;
padding: 30px 40px 40px 40px;
line-height:2.0em;
}

.intro-h5{
margin:0 auto;
margin-bottom:12px;
text-align:center;
font-weight:bold;
color:#800080;
}

.intro-h5::before{
  content: "";
  display: inline-block;
  width: 38px;
  height:18px;
  background: url(../images/tkrzk/ornament2-1.png) no-repeat;
  background-size: contain;
  margin-right:12px;
  margin-top:2px;
}

.intro-h5::after{
  content: "";
  display: inline-block;
  width: 38px;
  height:18px;
  background: url(../images/tkrzk/ornament2-2.png) no-repeat;
  background-size: contain;
  margin-left:12px;
  margin-top:2px;
}
section h3{
  display:none;
}

/* 宝塚市史　サブページ */
html#takarazuka-index{
.list-design4 > .contents-wrap{
  margin:2rem auto;
  width:100%;
  max-width:1024px;
}

.list-design4 .item{
  margin: 0.5rem;
  border: none;
  background-color: #fcf1e5;
  display: block;
  padding:0;
}

.list-design4 .item img{
  display: block;
  object-fit: contain;
  object-position:50% 0%;
  width: 100%;
  height: auto;
  min-height: 100px;
  max-height: 350px;
  transition: liansform .6s ease;
}


.list-design4 .item img:hover{
  transform: scale(1.0); 
}


.list-design4 .item h4{
  display: block;
  padding: 1rem 1.5rem ;
  font-size:1.5rem;
  line-height:1.5;
  transition: .3s ease;
}

.list-design4 .item h4 img{
  width:100%;
  height:auto;
  max-width:194px;
  object-fit: contain;
  margin:0 auto;
}

.list-design4 .item > h4:hover{
  background:none;
}

.list-design4 .item p{
  padding: 2rem 1.5rem;
}

.list-design4 .item p a{
  display:grid;
  color:#800080;
  text-decoration:none;
  font-weight:600;
  font-size: 1.5rem;
  line-height:2.5;
  position:relative;
}

.list-design4 .item p a::before{
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/tkrzk/arrow.png) no-repeat;
  background-size: contain;
  left:17%;
  top:27%;
  position: absolute;
}
}
/* 宝塚市史　サブページ　ここまで */

/* 近世絵図　サブページ*/
html#ezu-index{
.list-design4 .item h4{
  border-top:1px solid #cfcfcf;
}
.list-design4 .item h4 a{
  text-decoration:none;
  color:#800080;
  font-size:1.0rem;
}

.list-design4 .item > h4:hover{
  background:none;
}

.list-design4 .item > h4:hover a{
  color:#252525;
}

}

/* 近世絵図　サブページ　ここまで */

/* 西村家文書　サブページ */
html#monjo-index{
ul.listtb{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background-color: #fff;
  list-style:none;
}

ul.listtb li{
  border-bottom: solid 1px #eee;
  display:flex;
  flex-wrap:nowrap;
}

ul.listtb div{
  padding: 15px 10px;
  display:flex;
  align-items:center;
  text-align:left;
}

ul.listtb div a{
  color:#800080;
  font-weight:600;
  text-decoration:none;
}

ul.listtb div.image-box{
  text-align:center;
  width:20%;
  display:grid;
  }
ul.listtb div.title-box{ width:20%;}
ul.listtb div.year-box{ width:20%;}
ul.listtb div.solution{ width:40%;}

ul.listtb div img{
  width:100%;
  height:auto;
  max-width:200px;
  max-height:220px;
  object-fit:contain;
  border:1px solid #E0E0E0;
  display:block;
  margin:5px auto;
}

ul.listtb li.listtb-th div{
  display:block;
  text-align:center;
  font-weight:600;
}

@media screen and (max-width:769px){
ul.listtb{display:block;}
ul.listtb div{display:block;}
ul.listtb div.title{width:100%;}

ul.listtb div img{
width:auto;
width:80%;
text-align:center;
margin:0 auto;
display:inline;
}
}
}
/* 西村家文書　サブページ　ここまで */

/* 旧松本邸　サブページ */
html#matsumoto-index{
.list-design6 > .contents-wrap{
  width:100%;
  max-width:1024px;
  margin:1rem auto;
}

h4{
margin:0 auto;
margin-bottom:12px;
text-align:center;
font-weight:bold;
color:#800080;
}

h4::before{
  content: "";
  display: inline-block;
  width: 38px;
  height:18px;
  background: url(../images/tkrzk/ornament2-1.png) no-repeat;
  background-size: contain;
  margin-right:12px;
  margin-top:2px;
}

h4::after{
  content: "";
  display: inline-block;
  width: 38px;
  height:18px;
  background: url(../images/tkrzk/ornament2-2.png) no-repeat;
  background-size: contain;
  margin-left:12px;
  margin-top:2px;
}

.howto{
background-color:#fff;
padding:5%;
width:100%;
max-width:1000px;
}

.howto img{
width:auto;
max-width:100%;
}

.howto h5{
margin-top: 25px;}

.howto p{
margin-left:5px;
}

ol.matsumototei-menu{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.matsumototei-menu li{
  position:relative;
  padding: 2px 5px 2px 40px;
  margin: 5px 0 5px 30px;
  font-weight: bold;
  font-size:14px;
}
ol.matsumototei-menu li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  background: #e50036;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ol.matsumototei-menu li span:first-child{
  display:inline-block;
  width:120px;
  margin-right:7px;
  color:#e50036;
}

.inline-img{
  display:inline;
  height:25px;
  margin:0 2px;
}

.howto h5{
margin-top:3rem;
margin-bottom:7px;
text-align:left;
color:#800080;
font-weight:bold;
display: flex;
align-items: center;
}

.howto h5 a{
color:#800080;}

.howto h5 a:hover {
color:#00657F;}


.howto h5::before{
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/tkrzk/arrow.png) no-repeat;
  background-size: contain;
  margin-right:12px;
  margin-top:2px;
}
}
/* 旧松本邸　サブページ　ここまで */

/* さんぽマップ　サブページ */
html#sanpomap-index{
.contents_corse .title-h6{
margin-top:3rem;
margin-bottom:7px;
text-align:left;
color:#800080;
font-weight:bold;
display: flex;
align-items: center;
}

.contents_corse{
  width:100%;
  padding:0.5rem 2rem;
  text-align:left;
  margin:0;
}

.contents_corse .title-h6 a{
color:#800080;
text-decoration:none;
}

.contents_corse .title-h6 a:hover {
color:#00657F;}


.contents_corse .title-h6::before{
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/tkrzk/arrow.png) no-repeat;
  background-size: contain;
  margin-right:12px;
  margin-top:2px;
}

.list-design6{
  width:100%;
  max-width:1024px;
  margin:0 auto;
}

.list-design6 .contents-wrap .item{
  text-align:left;
  padding:0.5rem 1rem;
  line-height:1.75;
}

}
/* さんぽマップ　サブページ　ここまで */


/* ポストカード　サブページ */
/*
html#postcard-index{
* {
  box-sizing: border-box;
}

h2{ margin-top:2rem;}


#head {
  display:block;
  position:relative;
  width: 100%;
  max-width:1280px;
  height: 100vh;
  padding:0 1rem;
  margin:0 auto;
}

#head ul {
  width: 100%;
  height: auto; 
  max-height: 100vh; 
  overflow-y: none; 
  overflow:hidden;
  margin: 0;
  padding: 0 2rem;
  list-style: none;
  column-gap: 0;
  column-count: 5;
  line-height: 0;
}

#head ul li {
  padding:0;
  max-width: 20vw;
  margin: 5px 2px;
  opacity: 0;
}

#head ul li a img {
  width: 100%;
  max-width:250px;
  height:auto;
  vertical-align: bottom;
}

@media screen and (max-width: 1080px) {
  #head ul {
    padding:0;
    column-count: 4;
    max-width:100%;
    overflow:hidden;
  }
  #head ul li {
  max-width: 25vw;
  }
}

@media screen and (max-width: 820px) {
  #head ul {
    column-count: 3;
    max-width:100%;
   }
  #head ul li {
  max-width: 50vw;
  }
#head ul li a img {
  }
}

@media screen and (max-width: 560px) {
  #head ul {
    column-count: 2;
  }
#head ul li a img {
  object-fit:cover;
  height:150px;
  }
}

.btn_reload{
width:100%;
margin: 0;
padding: 1rem 2rem;
position:relative;
}

.btn_reload button {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	border: none;
	background: none;
	cursor: pointer;
	display: block;
	width: 40%;
	max-width: 250px;
	min-width:150px;
	height: 36px;
	line-height: 1.25;
	text-align: center;
	background: #9b373c;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	font-size: 1.15rem;
	transition: .3s ease;
	margin-right:0;
	margin-left:auto;
}

.btn_reload button:hover {
	background: #666;
	transition: .3s ease;
}
.dli-redo{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  transform: rotate(45deg);
  margin-right:0.5rem;
}

.dli-redo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border: 0.1em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotate(-45deg);
}

.dli-redo::after {
  content: '';
  position: absolute;
  top: 0.05em;
  right: 50%;
  width: 0.2em;
  height: 0.2em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: content-box;
  transform: translateX(0.14142em) rotate(45deg);
  transform-origin: top right;
}

@media screen and (max-width: 560px) {
.btn_reload button {
	width: 70%;
	max-width: 450px;
	min-width:150px;
}
}
}
*/
/* ポストカード　サブページ　ここまで */

/* キッズページここから */

#kids-contents.list-design3 .item{
  overflow: hidden;
  display: grid;
/*
  grid-template:"img ttl" max-content
                "img intro" 1fr
                "img link" max-content
                /0.9fr 1.1fr;
*/
  border: 1px solid var(--borderColor);
  background-color: #ffffff;
}

#kids-contents.list-design3.column1 .item{
  margin:0.5rem;
  grid-template-columns: 1fr 1.5fr;
}

#kids-contents.list-design3 .item > div.thum img{
  transition: transform .6s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width:500px;
}

#kids-contents.list-design3.column1 .item > h4{
  padding:0;
}

#kids-contents.list-design3.column1 .item > h4 a{
  padding: 2rem 1.25rem 2rem;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;

}

#kids-contents.list-design3 .item > h4 a img{
width:auto;
max-width:100%;
height:69px;
margin:0;
object-fit:contain;
}

#kids-contents.list-design3 .item > h4 a:hover{
  background:none;
}
#kids-contents.list-design3 .item img:hover,
#kids-contents.list-design3 .item > h4 a img:hover{
    transform:scale(0.98);
}

#kids-contents.list-design3.column1 .item > p{
  padding: 1rem 3rem 2rem ;
  font-size: 1.2rem;
  line-height:2;
}

#kids-contents.list-design3 .item ul.illust{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  padding-bottom:4rem;
}

#kids-contents.list-design3 .item ul.illust li.art-icon{
  width:30%!important;
  min-width:70px;
  max-width:200px;
  margin:0 0.5rem;
  padding:0;
  text-align:center;
}
#kids-contents.list-design3 .item ul.illust li.art-icon img{
  display:block;
  width:100%;
  max-width:150px;
  height:auto;
  object-fit:contain;
  margin:0 auto;
}

#kids-contents.list-design3 .item ul.illust li.pop-enter{
  width:100%;
  min-width:150px;
  max-width:100%;
  margin:0 ;
  margin-bottom:1rem;
  display:block;
}

#kids-contents.list-design3 .item ul.illust li.pop-enter img{
  display:block;
  width:100%:
  min-width:150px;
  max-width:450px;
  object-fit:contain;
  margin:0 auto;
}

@media screen and (max-width: 560px) {
#kids-contents.list-design3 .item{
  display:block;
}

}