@charset "utf-8";
/* CSS Document */
/*自社サイトのcssそのまま*/

/*cat-pc-flex.css*/
.flexbox {
width: 100%;
align-content: flex-start;
display: flex ;
flex-wrap: wrap ;
justify-content: space-between ;
/*background-color: #F1F3F3;*/
}

.flexitem {
width: 23% ;
margin-top: 2em;
padding: 0;
text-align: center;
/*background-color: #C38F7D;*/
}

.flexitem2 {
width: 49% ;
margin-top: 2em;
padding: 0;
/*text-align: center;*/
/*background-color: #C38F7D;*/
}

.flexitem3 {
width: 31% ;
margin-top: 2em;
padding: 0;
/*text-align: center;*/
/*background-color: #C38F7D;*/
}

.flexitem_image {
width: 20% ;
margin: 0;
padding: 0;
text-align: justify;
}

.flexitem_comment {
width: 75% ;
margin: 0;
padding-: 0;
text-align: justify;
}


/*cat-pcxxx.css*/
ul {
  padding:0 ;
  margin:0 ;
}

.ranking1 {
width: 100%;
margin: 0px;
}

.ranking1 li {
display: inline-block;
width: 50%;
vertical-align: top;
text-align: center;
margin: 0;
padding: 0;
}

.ranking1 li img{
width: 100%;
height: 500px;
object-fit: cover;
object-position: 0% 0%;
}


.price {
font-size: 2.2vh;
font-weight: bold;
text-align:center;
color: #26201D;
margin-bottom:1em;
}

p.price:after{
content:"円(税込)";
font-size:70%;
font-weight: bold;
text-align:center;
}

h1.ttl {
  font-size: 3.2vh;
  font-weight: bold;
  text-align:center;
  color: #26201D;
  display: inline-block;
  padding: 0 10px;
}

.sub {
display: block;
font-size: 1.8vh;
position: relative;
width: 180px;
margin: 0 auto 0.3em;
background-color: #fff;
}

.sub:before {
content: '';
height: 1px;
background-color: #000;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
width: 240px;
left: -30px;
}

h2 {
  font-size: 2.4vh;
  color: #26201D;
  font-weight: bold;
  margin: 1em 0 0.5em;
  text-align:center;
}

h2.ttl {
  font-size: 3.2vh;
  display: inline-block;
  padding: 0 10px;
}

h2.ttl_left,
h3.ttl_left {
  font-size: 2.8vh;
  text-align: left;
  margin-bottom: 0.5em;
  padding: 0.5em 0 0.25em 0;
  /*border-top: solid 1px #26201D;*/
  border-bottom: solid 1px #26201D;
}

h3 {
  font-size: 2.4vh;
  font-weight: bold;
  text-align: justify;
  margin: 0.5em 0;
}

h3.itemname { 
  font-size: 1.8vh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /*IE対策*/
  line-height: 1.5em;
  max-height: 3em;
}

h3.ttl {
  font-size: 2.4vh;
  padding: 0 0;
  margin: 1.5em 0 0.5em;
}

h3.ttl:before{
content:"■ ";
color:#84ADC3;
font-weight: bold;
text-align:center;
}

h4 {
  font-size: 2.2vh;
  font-weight: bold;
  margin: 1em 0;
  text-align:left;
}

h5 {
  font-size: 1.8vh;
  font-weight: bold;
  margin: 0;
  text-align:left;
}

.mainttl{
  font-size:4vh;
  font-weight: bold;
  text-align:center;
}

.blue{
  padding: 0 0.5em;
  border-left: solid 5px #84ADC3;
}

.btn_more {
width: 50%;
font-size: 2vh;
font-weight: bold;
text-align:center;
padding: 0;
/*border: 1px solid #26201D;*/
color: #F1F3F3;
background: #898e92;
margin: 0 auto;
}

.btn_mini a,
.btn_more a {
display: block;
padding: 1em;
color: #F1F3F3;
}

.btn_mini{
width: 200px;
margin-right:0;
}

.title {
  font-size: 1.8vh;
  font-weight: normal;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.title img {
  width: 100%
}

.ranking2 {
  margin-bottom: 0;
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
}

.ranking2 li {
  width: 32%;
  text-align: center;
  font-size: 14px;
  max-width: 260px;
}

/*.ranking2 li:nth-child(3) {
  margin-right: 0;
  display: inline-block;
}*/

.ranking2 img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: 0% 38%
}


.title2 {
  font-size: 1.6vh;
  text-align: justify;
  width: 100%;
  margin: 0 auto;
  /*
  height:4.5em;
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;*/

  /*IE対策*/
  /*line-height: 1.5em;
  max-height: 4.5em;*/
}

.title2 img {
  width: 100%;
  height: auto;
}

.rank {
  font-size: 2vh;
  text-align: center;
  font-weight: bold;
  margin: 2em 0 0 0;
  background: #F1F3F3;/*背景色*/
  padding: 0.3em;/*文字まわり（上下左右）の余白 
  /*border-bottom: 1px solid #26201D ;*/ 
  color: #26201D;
}
  
.select {
  background: #FFF;/*背景色*/
  margin: 2em 0 0 0;
}

.message{
  text-align: justify;
  text-justify: inter-ideograph;
  font-size:2vh;
  line-height: 170%;
  /*padding: 0px 30px;*/
  margin: 1em 0 ;
}

.date{
  text-align:right;
  margin: 0 0 0 auto;
  font-size: 1.6vh;
  padding: 0 0 2em;
}

.center{
  text-align:center;
}

.roundbt {
background-color: #26201D;
padding: 20px 10px;
text-align: center;
/*font-weight: bold;*/
font-size:2vh;
margin:0 auto;
width:60%;
border-radius: 50px;
}

.space1{ padding-bottom: 50px;}
.space2{ padding-bottom: 100px;}
.space3{ padding-bottom: 150px;}