/*
Theme Name: vs_original
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: これは投稿記事専用のCSSファイルです。
Version: 1.0.0
*/
/*-------------------------------
　　記事一覧スタイル
-------------------------------*/
.topicsArea {
	padding: 0 20px;
	width: 100%;
}
.topicsArea .imgBox {
	border: solid var(--bgcolor-05) 5px;
	border-radius: 5px;
}
.topicsArea .four img {
height: 190px;
object-fit: contain;
object-position: center;
display: block;
width: 100%;
}
.topicsArea .gridBlock {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px 15px;
}
.topicsArea .gridBlock a { width: 100%; }
.topicsArea .contTtl {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 18px;
transition: all 0.3s;
}
.topicsArea .blogThum {
object-fit: cover;
width: 70%;
height: 195px;
display: block;
  margin: auto;
  object-position: center 10%;
}
.topicsArea .postTime {
font-size: 17px;
letter-spacing: 0.5px;
}
.topicsArea .gridBlock img {
transition: all 0.3s;
}
.topicsArea .gridBlock a:hover img {
opacity: .70;
}
.topicsArea .gridBlock a:hover .contTtl {
color: var(--thcolor-02);
}
@media screen and (max-width: 1200px) {
.topicsArea .gridBlock {
	    gap: 45px 15px;
}
}
@media screen and (max-width: 1080px) {
.topicsArea .gridBlock {
grid-template-columns: 1fr 1fr;
}
.topicsArea .blogThum {
height: 240px;
}
}
@media screen and (max-width: 500px) {
.topicsArea .gridBlock {
	grid-template-columns: 1fr;
	gap: 35px 0;
}
.topicsArea .blogThum {
	height: 190px;
	width: 56%;
}
.topicsArea .contTtl {
		font-size: 16.5px;
}
}
/*-------------------------------
　　ページネーション
-------------------------------*/
.nav-links {
display: flex;
gap: 15px;
justify-content: center;
padding: 100px 0 0;
}
.nav-links * {
display: grid;
width: 50px;
height: 50px;
place-content: center;
background: var(--bgcolor-05);
border-radius: 50px;
	border: solid 3px var(--bgcolor-05);
}
.nav-links a:hover {
background: var(--bgcolor-01);
}
.nav-links .page-numbers.current {
	  border: solid 3px var(--bgcolor-03);
}
@media screen and (max-width: 980px) {
.nav-links {
gap: 5px;
}
.nav-links * {
font-size: 14px;
}
}
/*-------------------------------
　　カテゴリータグ
-------------------------------*/
.topicsArea .catBox {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	font-weight: 500;
	padding: 0 0 7px;
}
.topicsArea .catBox li {
font-size: 15px;
}
.topicsArea .catBox a {
	padding: 5px 15px;
	border-radius: 50px;
	background: var(--bgcolor-01);
}
.topicsArea .catBox a:hover {
background: var(--bgcolor-05);
color: #fff;
}
/*-------------------------------
　　記事詳細
-------------------------------*/
.voiceArea{
	padding: 0 20px;
}
.voiceArea .postTime,.postArea .postTime {
  font-size: 25px;
}
.voiceArea .postTtl,
.postArea .postTtl{
	padding: 0 0 30px;
	border-bottom:solid 1px var(--bgcolor-03);
	font-size: 38px;
	line-height: 2;
	font-weight: 600;
}
.voiceArea .catBox,.postArea .catBox{
	padding: 20px 5px 80px;
	display:flex;
	gap:10px;
	flex-direction: column;
}
@media screen and (max-width: 1000px) {
.voiceArea .postImg {
    margin-bottom: 60px;
}
.voiceArea .postTextBox {
		gap: 60px;
}
.voiceArea .postTtl,
.postArea .postTtl{
		font-size: 23px;
}
.voiceArea .postComment,.voiceArea .postField{
	font-size: 16.5px;
	line-height: 2.5;
}
.voiceArea .postTime,
.postArea .postTime {
  font-size: 20px;
}
}
@media screen and (max-width: 480px) {
.voiceArea .catBox,
.postArea .catBox	{
	padding: 20px 5px 50px;
	}

}
/*
ul{
	display:flex;
	gap:10px;
}
*/
.ulBox{
	display: flex !important;
	gap:10px;
	flex-wrap: wrap;
}
.ulBox li{
	border-radius:3px;
	padding: 0 5px;
	list-style:none;
}
.ulBox li:nth-of-type(n+2){
    border: solid 1px var(--thcolor-03);
	content:none;
}
ul.ulBox ::before{
	display: none;
}
/* .voiceArea ul li:nth-of-type(1) {
	background-color:var(--bgcolor-04);
border: solid 1px var(--bgcolor-04); 
} */
.ulBox li:first-of-type{
	background-color:var(--bgcolor-04);
}
.voiceArea .postImg{
	margin-bottom: 80px;
	text-align: center;
}
.voiceArea .postTextBox{
	display: grid;
	gap: 80px;
}
.postArea {
	padding: 0 20px;
}
.postTextBox .postField,
.postArea .txtBox{
	letter-spacing : 0px;
	line-height: 2.5em;
	margin:0 10px;
}
.postArea .txtBox {
	display: grid;
	gap: 10px;
}
.postArea .txtBox a {
	display: inline-block;
}
.voiceArea .orangeBtn,
.postArea .innerBox .orangeBtn,
.productArea .orangeBtn{
	margin: 100px auto 0;
}

/*-------------------------------
	オンラインショップ
-------------------------------*/
.onlineshopArea {
        padding: 0 20px;
        width: 100%;
}
.onlineshopArea .orangeTtl {
        text-align: center;
}
.onlineshopArea .wrapGrid {
        display: grid;
        gap: 120px 0;
}
.onlineshopArea .orangeBtn {
        margin: 50px 0 0 auto;
}
.productInfo .contentBox{
		line-height: 2.5;
}
@media screen and (max-width: 1080px) {
.productInfo .contentBox{
		font-size: 16.5px;
}
}
/*-------------------------------
　　営業日カレンダー
-------------------------------*/
.calendarArea .innerBlock{
	  display: grid;
      gap: 80px 0;
}
/*-------------------------------
　　お知らせ
-------------------------------*/
.newsList {
		padding: 0 20px;
}