#main {
  backgorund-color: #efefef;
}
.main_message {
  width:100% ;
  display: flex;
  justify-content: center;
}
.main_message-inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 50px;
}
.main_message-container{
  background-image: url("../files/images/top/main_message/ninngyou-logo.png");
  background-repeat: no-repeat;
  background-size: 200px auto;
  background-position: 0% calc(100% - 10px);
  width: 750px;
  pointer-events: none;  /*ホバーで使用*/
  -webkit-transition: all 0.5s ease;  /* 徐々に変化*/
  -moz-transition: all 0.5s ease;  /* 徐々に変化*/
  -o-transition: all 0.5s ease;  /* 徐々に変化*/
  transition: all  0.5s ease;  /* 徐々に変化*/
}

.main_message-container:hover {
    background-image: url("../files/images/top/main_message/ninngyou-logo_hover.png");
  }

.main_message-text span{
  display: inline-block
}
.main_message-text p {
  text-align: center;
  color: #c8c8c8;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  line-height: 2.5em;
  margin: 0;
}
.main_message-btn {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.main_message-btn a {
  height: 100%;
  pointer-events: auto;  /*ホバーで使用*/
}
.main_message-btn .more_btn:hover {
  border: 1px solid #f6f1a8;  
  color: #f6f1a8;
}
.news {
  display: flex;
  justify-content: center;
}
.news_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 85%;
  max-width: 900px;
  margin: 60px 0;
}
h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: center;
  margin: 5px;
  color: #e5cfa3;
  font-size: 2.4rem;
  font-family: "源ノ明朝", serif;
  letter-spacing: 0.2em;
}
.title_main {
  margin-bottom: 15px;
}
.title_sub {
  font-size: 0.40em;
}
.news {
  background-color: #3d3d3d;
}
.news_contents {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.news_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  width: 100%;
}
.news_item {
  background-color: #ffffff;
  border-radius: 5px;
  color: #333333;
  height: 100%;
}
.news_item-inner {
  padding: 15px;
}
.news_item.-no-image {
  display: flex;
}
.news_item.-no-image .news_item-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-image_a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.news_item-image {
  display: flex;
  justify-content: center;
  width: 70%;
}
.news_item-image img {
  width: 100%;
  object-fit: contain;
}
.news_item-text-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.news_item-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.news_date {
  display: flex;
  align-items: center;
  height: 24px;
  font-weight: bold;
  margin-right: 10px;
  padding-top: 15px;
  font-size: 0.9rem;
}
.news_item.-no-image h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: bold;
  margin-right: 10px;
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.4em;
}
.news_text {
  letter-spacing: 0.02em;
  line-height: 1.3em;
  font-size: 0.9rem;
}
.-abbreviation { /*長文テキスト省略*/
  overflow: hidden;/*長文テキスト省略*/
  display: -webkit-box;/*長文テキスト省略*/
  text-overflow: ellipsis;/*長文テキスト省略*/
  -webkit-box-orient: vertical;/*長文テキスト省略*/
  -webkit-line-clamp: 5;/*長文テキスト省略*/
  /* ブラウザがサポートしていない場合のフェールセーフ 長文テキスト省略*/
  max-height: 300px;
}
.news_text.-abbreviation.-no-title__no-data { /*長文テキスト省略*/
  overflow: hidden;/*長文テキスト省略*/
  display: -webkit-box;/*長文テキスト省略*/
  text-overflow: ellipsis;/*長文テキスト省略*/
  -webkit-box-orient: vertical;/*長文テキスト省略*/
  -webkit-line-clamp: 6;/*長文テキスト省略*/
  /* ブラウザがサポートしていない場合のフェールセーフ 長文テキスト省略*/
  padding-top: 15px;
}
.-no-image .news_text {
  letter-spacing: 0.05em;
  line-height: 1.3em;
}
.news_text p {
  margin: 5px 0;
}
.-no-image .news_text p {
  margin: 10px 0 0 0;
}

.news_text a:link { text-decoration: underline; color: #333333; }
.news_text a:visited { text-decoration: underline; color: #333333; }
.news_text a:hover { text-decoration: underline; color: #333333; }
.news_text a:active { text-decoration: underline; color: #333333; }
.news_more {
  display: flex;
  justify-content: flex-end;
  padding: 0 5px;
}
.news_tag-block {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 5px;
  margin: 5px 0 0 0;
 }
.news_tag-block .top-page_more_tag {
  color: #ffffff;
  line-height: 1.2em;
  padding: 5px;
  text-indent: calc(0.2em + 5px);
  border: none;
  background-color: #a5a5a5;
  font-size: 0.6rem;
  width: auto;
  height: calc(100% - 10px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  border-radius: 3px;
}
_::-webkit-full-page-media, _:future, :root .news_tag-block .top-page_more_tag {
  text-indent: calc(0.2em + 5px);
}
.news_tag-block .top-page_more_tag span{
  text-indent: 0;
}
_::-webkit-full-page-media, _:future, :root .news_tag-block .top-page_more_tag span {
  text-indent: 0;
}
.news_tag-block a:hover .top-page_more_tag {
  border: none;
  color: #ffffff;
  background-color: #a5a5a5;
  opacity: 0.7;
}
.news_tag-block .top-page_more_tag:hover {
  border: none;
  color: #ffffff;
  background-color: #a5a5a5;
}
/*.news_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 8px;
  letter-spacing: 0.2em;
  right: 0;
  color: #e50012;
  border: 2px solid #e50012;
  border-radius: 5px;      /* 角丸 CSS3草案 */  
/*  -webkit-border-radius: 5px;  /* 角丸 Safari,Google Chrome用 */  
/*  -moz-border-radius: 5px;  /* 角丸 Firefox用 */  
/*}*/



.news_more-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
  position: relative;
  text-decoration: none;
  padding-bottom: 8px;
}
.news_more .more_arrow {
  width: 0.7em;
  height: 0.7em;
  color: #fff;
}
.news_more a {
  transition: transform 0.6s; /*変形の時間*/
  }
.news_more-text::after {
  position: absolute;
  content: '';
  bottom: .1em;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  background: #fff;
  transition: all .6s ease 0s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}
.news_more a:hover .news_more-text::after {
  bottom: 0;
  opacity: 1;
  transform: scale(1, 1);/*X方向にスケール拡大*/
}

.product {
  display: flex;
  justify-content: center;
  align-items: center;
}
.product_inner {
  width: 85%;
  margin: 60px 0;
  max-width: 800px;
}
.product_header h2 {
  font-size: 2.1rem;
}
.product_header p {
  text-align: center;
  line-height: 2.0em;
  margin: 30px 0;
  color: #e5d7b3;
  font-size: 0.9rem;
}
.product_header span {
  display: inline-block;
}
.product_category {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 20px 0 30px 0;
}
.product_category h3 {
  position: relative;
  color: #ffffff;
  font-size: 1.7rem;
  font-family: "源ノ明朝", serif;
  letter-spacing: 0.2em;
  padding: 0 0 10px 0;
  margin: 15px 0 10px 0;
}
.product_category.match h3 {
  border-bottom: 5px solid #c80000;
}
.product_category.lighter-and-igniter-stick h3 {
  border-bottom: 5px solid #d6cd44;
}
.product_category.pr h3 {
  border-bottom: 5px solid #494fac;
}

.product_category-tittle {
  display: flex;
  justify-content: center;
  text-align: center;
}
.product_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  width: 100%;
  margin: 15px 0;
}

.product_category.lighter-and-igniter-stick .product_container{
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.product_category.pr .product_container{
  grid-template-columns: 2fr 2fr;
}

.product_items {
  text-align: center;
}
.product_img {
  padding: 5px;
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-transition: all 0.6s ease;  /* 徐々に変化*/
  -moz-transition: all 0.6s ease;  /* 徐々に変化*/
  -o-transition: all 0.6s ease;  /* 徐々に変化*/
  transition: all  0.6s ease;  /* 徐々に変化*/
}
.product_img img {
  width: 100%;
  background-color: #ffffff;
  -webkit-transition: all 0.6s ease;  /* 徐々に変化*/
  -moz-transition: all 0.6s ease;  /* 徐々に変化*/
  -o-transition: all 0.6s ease;  /* 徐々に変化*/
  transition: all  0.6s ease;  /* 徐々に変化*/
}
.product_items a:hover .product_img {
  background-color: #ffffff;
  overflow: hidden;
}
.product_items a:hover .product_img img {
  opacity: 0.6;
  transform: scale(1.02); /* 拡大 */
  background-color: #ffffff;
}
.product_text {
  text-align: center;
  line-height: 1.7em;
  padding: 8px 0 5px 0;
  font-size: 1.1rem;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.product_items a:link { text-decoration: none; color: #ffffff; }
.product_items a:visited { text-decoration: none; color: #ffffff; }
.product_items a:hover {
  cursor: pointer;
}
.product_items a:active { text-decoration: none; color: #ffffff; }

.product_text::after {
  position: absolute;
  content: '';
  bottom: .1em;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  background: #fff;
  transition: all .6s ease 0s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}
.product_items a:hover .product_text::after {
  bottom: 0;
  opacity: 1;
  transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*------ 画面サイズ条件 -------*/


@media (min-width: 1100px) {

.main_message-container{
  background-size: 250px auto;
  width: 950px;
}

}
@media (max-width: 1100px) {


.news_inner {
  width: 90%;
}
.news_container {
  gap: 10px;
}

}


@media (min-width: 769px) {
  
.product_img {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
}
@media (max-width: 768px) {



.main_message-container{
  background-image: none;
  width: auto;
  margin: 0;
  }
.main_message-container:hover{
  background-image: none;
  }
.main_message-inner p{
  margin-top: 0px;
}
.news_inner {
  width: 70%;
}
.news_container {
  grid-template-columns: 1fr;
  gap: 10px;
}
.news_item {
  display: flex;
  width: 100%;
}
.news_item-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
.news_item-block {
  margin: 0 0 0 10px;
  width: 90%;
}
.news_item.-no-image .news_item-block {
  margin: 0 5px;
  width: 100%;
}
.news_item-text-block {
  width: calc(95% - 20% - 20px);
}
.news_top {
  justify-content: flex-start;
  margin: 0;
}
.news-image_a {
  width: 25%;
}
.news_item-image {
  display: flex;
  justify-content: center;
  width: 100%;
}
.news_item-image img {
  width: 100%;
}
.news_date {
  padding-top: 0;
}
.news_item.-no-image h3 {
  padding: 5px 0 0 0;
}
.news_text {
  -webkit-line-clamp: 4;
  line-height: 1.5em;
}
.news_item.-no-image p {
  margin: 5px 0 0 0;
}
.-abbreviation { 
  max-height: 100px;
}
.news_text.-abbreviation.-no-title__no-data { /*長文テキスト省略*/
  -webkit-line-clamp: 5;/*長文テキスト省略*/
  padding-top: 0px;
  max-height: 115px;
}
.product_inner {
  width: 70%;
}
.product_container {
  grid-template-columns: 1fr 1fr;
}

.product_category.lighter-and-igniter-stick .product_container{
  grid-template-columns: 1fr 1fr;
}
.product_category.pr .product_container{
  grid-template-columns: 1fr;
}

}



@media (max-width: 430px) {

.title_main {
  margin-bottom: 10px;
}
.news h2 {
  font-size: 1.7rem;
}
.title_sub {
  font-size: 1rem;
}
.main_message-text p {
  line-height: 2.0em;
}
.news_inner {
  width: 90%;
}
.product_header h2 {
  font-size: 1.8rem;
}
.product_inner {
  width: 90%;
}
.product_text {
  font-size: 0.9rem;
}


}
/*------ 画面サイズ条件 -------*/