@charset "utf-8";

/*------------------------------------------------
   新よこすか風土記
------------------------------------------------*/

/* archive */

#story {
  width: 100%;
}

.storyBlock {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.storyBox {
	width: calc((100% - 10px) / 2);
  background: #fff;
  box-shadow: 0 10px 10px -6px rgba(0,0,0,.3);
  transition: all 0.3s ease-in-out;
  margin-bottom: 40px;
}

.storyBox a {
  display: block;
  text-decoration: none;
}

.storyBox:hover {
  box-shadow: 0 6px 10px -6px rgba(0,0,0,.3);
}

.storyBox .image {
	width: 100%;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.storyBox a:hover .image {
  background-color: #fff;
  opacity: 0.8;
}

.storyBox .image img {
	width: 100%;
  transform: scale(1);
	transition: all 0.3s ease-in-out;
}

.storyBox a:hover .image img {
  transform: scale(1.05);
}

.storyBox .textBlock {
	position: relative;
  padding: 0.6em;
}

.storyBox .textBlock .ctgry {
  position: absolute;
  top: -20px;
  left: 0;
  padding: 0.2em 0.4em;
	font-size: 1.2rem;
  background: #FFF;
}

.storyBox .textBlock .ctgry::before {
	content: '\f02d';
	font-family: FontAwesome;
	margin-right: 0.4em;
  font-size : 1.3em;
  color: var(--main-color);
}

.storyBox .textBlock .ctgry::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
  border-left: 6px solid #FFF;
	border-bottom: 10px solid #FFF;
	border-top: 10px solid transparent;
	border-right: 6px solid transparent;
}

.storyBox .textBlock .title {
	font-size: 1.2rem;
  font-weight: 400;
  text-align: right;
  margin-bottom: 0.2em;
}

.storyBox .textBlock .sub_title {
	font-size: 1.3rem;
  font-weight: 500;
  color: #ba2636;
  margin-bottom: 0.2em;
}

@media print, screen and (min-width: 601px) {

  .storyBlock {
    width: 940px;
    margin: 0 auto 80px;
  }

  .storyBlock::after {
    display: block;
    content:"";
    width: 300px;
  }

  .storyBox {
    width: 300px;
  }

  .storyBox .textBlock .ctgry {
    font-size: 1.2rem;
  }

  .storyBox .textBlock .title {
    font-size: 1.2rem;
  }

  .storyBox .textBlock .sub_title {
    font-size: 1.4rem;
  }

}


/*------------------------------------------------
   個別ページ
------------------------------------------------*/

.storySingleBlock {
  width: 100%;
}


.storySingleBox {
  margin-bottom: 40px;
}

.storySingleBox .ctgry {
	padding: 0.2em 0.8em;
	font-size: 1.3rem;
	color: #fff;
  background: var(--main-color);
  border-radius: 4px;
	margin-bottom: 0.6em;
}

.storySingleBox .ctgry::before {
	content: '\f02d';
	font-family: FontAwesome;
	margin-right: 0.4em;
  font-size : 1.3em;
	color: #fff;
}

.storySingleBox .sub_title{
	font-size: 1.5rem;
  font-weight: 500;
  color: #ba2636;
}

.storySingleBox .title{
	font-size: 1.3rem;
  font-weight: 400;
  text-align: right;
	margin-bottom: 1em;
}

.storySingleBox .imageBlock {
	width: 100%;
	margin-bottom: 40px;
}

.storySingleBox .imageBlock .image {
	width: 100%;
}

.storySingleBox .imageBlock .image img {
	width: 100%;
	height: auto;
}

.storySingleBox .content p {
	font-size: 1.4rem;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 1em;
}

@media print, screen and (min-width: 601px) {

  .storySingleBlock {
    width: 700px;
    margin: 0 auto;
  }


  .storySingleBox {
    margin-bottom: 80px;
  }


  .storySingleBox .ctgry {
    font-size: 1.4rem;
  }

  .storySingleBox .title{
    font-size: 1.6rem;
  }

  .storySingleBox .sub_title{
    font-size: 1.8rem;
  }

  .storySingleBox .content p {
    font-size: 1.5rem;
  }

}