/*
Theme Name: skt-cafe-child
Template: skt-cafe
*/

/* ↓共通設定 */
/* いい感じの色組み合わせ例 
*{
  background-color: #471e0a;
  color: #dad0c4;
} */


*{
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-style: normal;
  color: #dad0c4;

}

img{
  max-width: 100%;
  width: 100%;
  height: auto;
}

div, header, article, section, footer, p, dl, figure, ul, ol{
  box-sizing: border-box;
}

dl, figure, ul, ol{
  padding-left: 0;
}

a{text-decoration: none;}

li{
  list-style: none;
}
/* ↑共通設定 了 */

ul.nav{
  align-items: center;

}
.nav-item a{
  color: #aaa;
}
.nav-pills .nav-link.active,
.nav-item a:hover{
  background-color: #f58e2a;
  color: #471e0a;
}


.icon_top{
  height: 1em !important;
  width: auto;
}

.header{
  position: sticky;
  top: 0;
  background-color: rgba(71, 30, 10, .8);
}

.breadcrumbs{
  float: right;
}

.top-img{
  max-width: 1170px;
  display: block;
  margin: 0 auto;
  /* @media screen and (max-width: 767px){
    display: none;
  } */
}

.shadow{
  display: inline;
}

#top_img_container{
  position: relative;
}
#text_top{
  position: absolute;
  top:  40%;
  left: 40%;
}

#text_top p{
  background-color: rgba(71, 30, 10, .8);
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
}

.show_bg{
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.show_bg::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: .6;
}
.show_bg, .show_bg h2, li.card, li.card h3{
  color: #dad0c4;
}


/* サムネイルサイズ指定用 */
.dummy_img{
  width: 150px;
  height: 150px;
}
.thumbnail{
  width: 150px;
  height: 150px;
}

.list_childs{
  display: flex;
}
li.card{
  background-color: rgba(71, 30, 10, .8);
}

.my_border{
  display: inline-block;
  border-bottom: solid 1px #f58e2a;
}
.line_height{
  line-height: 1.5em;
}

/* fade */
.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}
/*  */

#main_content h3{
  color: gray;
}
.main_img_0, .main_img_1{
  max-height: 250px;
  width: 70%;
  object-fit: cover;
  object-position: 0 20%;
}
#main_img_box_0{
  text-align: left;
}
#main_img_box_0 div{
  bottom: 10%;
  right: 20%;
  background-color: #fff;
}
#main_img_box_1{
  text-align: right;
}
#main_img_box_1 div{
  bottom: 10%;
  left: 20%;
  background-color: #fff;
}

/* ボタンのホバー */
.btn{
  background-color: #471e0a;
  color: #dad0c4 !important;
  border: solid 3px #47140a;
}
.btn_hover:hover{
  color: #471e0a !important;
  border-color: inherit;
}
.btn_hover i, .btn_hover span{
  color: inherit;
}
#btn_about{
  width: fit-content;  
}


/* main_news css */
#news_box{
  display: flex;
  /* position: relative; */
  justify-content: center;
  flex-direction: column;
}

/* バナー---------------- */
.hover_item {
  position: relative;
  overflow: hidden;
}
.hover_item::before,
.hover_item::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  margin: auto;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 0;
}
.hover_item::before {
  background: rgba(71, 30, 10, .6);
  width: 100%;
  height: 100%;
}
.hover_item::after {
  color: #fff;
  content: "続きを読む";
  font-size: 22px;
  font-weight: bold;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  bottom: 0;
  right: 0;
  
}
 
.hover_item:hover::before,
.hover_item:hover::after {
  opacity: 1;
}
/* ----------------------- */

/* main-access css */
#access_text p::after{
  content: "";
  width: 100%;
  max-width: 700px;
  height: 40%;
  max-height: 150px;
  position: absolute;
  top: 2rem;
  right: 50%;
  background-color: #f58e2a;
  opacity: .8;
  border-radius: 0 90px 90px 0;
  z-index: -10;
}

.g-map{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}
  
/* Google Mapのiframe */
.g-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-wrap{
  max-width: 50%;
}

#featured_post{
  /* background-color: rgba(245, 142, 42, .1); */
  border-bottom: solid 3px #aaa;
}


.entry-content * {
  color: #775327;
}

#sidebar{
  width: 20.3rem;
}

.content_text{
  color: #484f5e;
}

/* hum */
/* .navbar-toggler-icon::before{
  content: "Menu";

} */




/* メディアクエリ */
@media screen and (min-width: 480px) and (max-width: 767px){
  .container, .content-area {
    width: 80vw !important;
  }

}

@media screen and (max-width: 980px){
  /* #com_contents{
    
  } */
}