/*
width: 100%;
max-width: 1200px;
*/
@media (min-width: 1200px) {
.pc-only{
  display: initial;
}
.sp-only{
  display: none;
}



/* Header */
header#header{
  height: 80px;
  transition: 0.6s;
  padding: 0 2rem;
}

header#header a.logo{
  height: 31px;
  width: 220px;
}
header#header .header-cp{
  padding-top: 10px;
}

header#header.active{
  background-color: #474747;
}

header#header.active .active-hide{
  display: none;
}
header#header.active .header-cp{
  color: #fff;
}
header#header.active .btn-trigger span{
  background-color: #fff;
}

header#header.active a.logo{
  color: #fff;
}


/* GlobalNav */
#global-nav{
  background-color: #474747;
  border-top: 1px dashed rgba(255,255,255,0.3);
  height: calc(100vh - 80px);
  overflow-y: auto;

}

.gn-nav-wrap{
  width: 100%;
  
}

.gn-nav-wrap .gn-nav-content{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  min-height: calc(100vh - 240px);
}

.gn-nav-wrap .gn-nav-footer{
  border-top: 1px dashed rgba(255,255,255,0.3);
  text-align: right;
  padding: 2rem 4rem;
}
.gn-nav-wrap .gn-nav-footer img{
  height: 40px;
}
.gn-nav-cpl{
  color: #fff;
  font-family: var(--en-font-family);
  font-size: var(--fs-12);
  padding-top: 2rem;
}

.gn-navs{
  display: flex;
  gap: 200px;
  padding: 6rem 0 4rem;
}

.gn-nav-nd1{
  list-style: none;
  margin: 0;
  padding: 0;
}
.gn-nav-nd1 li{
  margin-bottom: 20px;
}
.gn-nav-nd1 li:last-child{
  margin-bottom: 0;
}
.gn-nav-nd1 li a,
.gn-nav-nd1 li span{
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  transition: 0.5s;
}

.gn-nav-nd2{
 list-style-type: disc; 
}
.gn-nav-nd2 li::marker {
  color: #fff;
}
.gn-nav-nd2 li {
  margin: 0;
}
.gn-nav-nd2 li a{
  color: #fff;
  font-size: 18px;
}
.gn-nav-nd1 li a:hover{
  text-decoration: none;
  color: #F5F5F5;
}

.gn-nav-footer .gn-nav-cp-logo{
  color: #ffffff;
}
.gn-nav-footer .gn-nav-cp-logo a{
  color: #ffffff;
}
.gn-nav-footer .gn-nav-cp-logo svg{
  width: 267px;
}
.gn-nav-footer-links{
  font-size: 13px;
  color: #fff;
}
.gn-nav-footer-links .white-link{
  color: #fff;
  text-decoration: none;
}
.gn-nav-footer-links .white-link:hover{
  text-decoration: none;
  color: #F5F5F5;
  opacity: 0.6;
}
.gn-nav-social-links{
  display: flex;
  gap: 2rem;
}
.gn-nav-social-links .social-link{
  padding: 1rem 0 4rem;
}
.gn-nav-social-links .social-link svg{
  height: 32px;
}



/* FOOTER */
#footer{
  display: flex;
  justify-content: space-between;
  padding: 60px 80px;
  text-align: left;
}
.footer-left .footer-logo svg{
  width: 392px;
}
.footer-nav{
  display: flex;
}
.footer-nav li a{
  font-size: 12px;
}
.footer-nav li::after {
  content: "/";
  font-size: 12px;
  margin: 0 10px;
  color: #ccc; /* 区切り線の色 */
}
.footer-nav li:last-child::after {
  content: ""; /* 最後の / を消す */
}

.footer-social{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: end;
}

.footer-right{
  text-align: right;
}
.footer-social-lbl{
  color: #ffffff;
  font-size: 13px;
}
.footer-social-links{
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 1.5rem;
  padding: 0;
}
.footer-social-links a{
  color: #fff;
}
.footer-social-links a svg{
  width: 40px;
}

.footer-cp-logo{
  padding-top: 2rem;
  color: #AEAEAE;
}
.footer-cp-logo svg{
  width: 267px;
}
.copyright{
  padding-top: 0.5rem;
  font-family: var(--en-font-family);
  font-size: 12px;
  color: #757272;
  font-weight: 500;
}



/* Content */
#content.site-content{
  padding-top: 80px;
  min-height: calc(100vh - 270px);
}

h1.main-title{
  font-family: var(--main-font-family);
  font-size: 45px;
  font-weight: bold;
}
h2.sub-title{
  font-family: var(--main-font-family);
  font-size: 30px;
  font-weight: bold;
}
h2.sub-title-sm{
  font-size: 26px;
}
h4.en-title{
  font-family: var(--en-font-family);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-top: 8px;
  padding-left: 5px;
}

.w-fix{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.w-fix-sp{
  width: 100%;
}

.desp-text{
  font-size: 15px;
}

.page-header h1{
  font-size: 25px;
  font-weight: bold;
  margin: 0rem 0 0;
  padding: 0;
}

/* Front Page */
.hero-section{
  width: 100%;
  padding: 20px 2rem;
}

.hero-section .video-wrap{
  border-radius: 30px;
  overflow: hidden;
  width: 100%;
  /* max-width: 1340px; */
  margin: 0 auto;
  aspect-ratio: 1340 / 650;
  background-color: #FFF;
  position: relative;
}
.hero-section .video-wrap #video-mask{
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  background-color: transparent;
}
.hero-section .video-wrap #video-background{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#video-background .hero-video{
  width: 100%;
  height: 100%;
}

#scroll-guide{
  height: 80px;
  width: 80px;
  border-radius: 99999px;
  border: 1px solid #fff;
  position: absolute;
  z-index: 2;
  bottom: 8rem;
  right: 2rem;
  font-family: var(--en-font-family);
}
#scroll-guide .scroll-guide-lbl{
  font-size: 11px;
  text-align: center;
  color: #fff;
  font-weight: 500;
  letter-spacing: 3px;
  padding-top: 20px;
}
.scroll-guide-bar{
  width: 1px;
  height: 20px;
  background-color: #fff; /* 線の色（必要に応じて変更） */
  margin: 0 auto;
  position: relative;
  animation: scrollMove 1.5s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes scrollMove {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
}

.half-inner{
  width: 100%;
  max-width: 600px;
  margin: 0 0 0 auto;
}
.pt-left .half-inner{
  margin: 0 auto 0 0;
}
.fp-section1 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% + 50% */
  grid-template-rows: auto 1fr;
  gap: 20px 0;
}

.fp-section1 .item-a {
  width: 100%;
  grid-column: 1;
  grid-row: 1;
}
.fp-section1.pw-fix .item-a .sub-title{
  margin-bottom: 0;
}

.fp-section1 .item-c {
  width: 100%;
  grid-column: 1;
  grid-row: 2;
}

.fp-section1 .item-b {
  grid-column: 2;
  grid-row: 1 / span 2; /* 縦に2行ぶん（AとCの横にまたがる） */
}

.fp-section1 .bg-image-wrap{
  margin: 58px 0 0 4rem;
  border-radius: 25px 0 0 25px;
  position: relative;
  height: 482px;
  width: auto;
  max-width: none;
  overflow: hidden;
}

.fp-section1 .bg-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

.fp-section1 .item-c .desp-text{
  padding-top: 1rem;
}

.fp-section2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右50%ずつ */
  grid-template-rows: auto 1fr;
  gap: 20px 0;
}

.fp-section2 .item-b {
  grid-column: 1;
  grid-row: 1 / span 2; /* 左に縦長 */
}

.fp-section2 .item-b .bg-image-wrap{
  width: 80%;
}
.fp-section2 .item-b .bg-image-wrap img{
  width: 100%;
}

.fp-section2 .item-a {
  padding-top: 2rem;
  grid-column: 2;
  grid-row: 1;
}

.fp-section2 .item-c {
  grid-column: 2;
  grid-row: 2;
  
}

.fp-section2.pw-fix .item-a{
  padding-top: 0;
}

.pw-fix .w80-image{
  width: 80%;
  display: block;
}
.fp-section1.pw-fix .w80-image{
  margin-left: auto;
}
.fp-section2.pw-fix .w80-image{
  margin-right: auto;
  
}
.fp-section1.pw-fix .item-c .desp-text{
  padding-top:0;
}


.pickup-photos {
  max-width: 1200px;
  margin: 0 auto;
  display: flex!important;
  gap: 1rem;
  justify-content: center!important;
}
.pickup-photos.swiper{
  padding-right: 0;
  padding-top: 2rem;
}

.pickup-link h6.link-title{
  font-size: 1rem;;
  font-weight: bold;
  margin: 0;
  color: var(--main-text-color);
  margin-top: 16px;
}
.pickup-link div.link-desp{
  font-size: 15px;
  margin-top: 6px;
}

.news-list .news-item{
  padding: 1.5rem 0;
}
.news-item a .left{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4rem;
}

.news-item a .left time{
  display: block;
  font-weight: var(--en-font-family);
  font-size: 15px;
}

.news-item a .left span{
  display: block;
  font-size: 15px;
  padding-top: 0;
}
.news-item a .right{
  position: absolute;
  right: 0;
  top: calc(50% - 10px);
  color: #B6B6B6;
  font-size: 20px;
}
.news-more{
  text-align: right;
}
/* ------------------ */
.recipe-list{
  overflow: visible;
  display: flex;
  gap: 60px;
}

.recipe-list li{
  /* flex: 0 0 25%; */
  flex: 0 0 calc((100% - (60px * 3)) / 4);
}

.recipe-list li img{
}

.recipe-list li .ttl{
  font-size: 11px;
  font-weight: bold;
  color: #000;
  padding-top: 10px;
}
/* ------------------ */

.fp-section5 .grid-layout-header{
  padding-bottom: 2rem;
}

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px 0;
}

/* 各アイテムの初期位置はSP向け（縦並び） */
/* .item-a, .item-b, .item-c {
  grid-column: auto;
  grid-row: auto;
} */

/* ==== パターン（Bが右） ==== */
.pt-right .item-b {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.pt-right .item-a {
  grid-column: 1;
  grid-row: 1;
}
.pt-right .item-c {
  grid-column: 1;
  grid-row: 2;
}


/* ==== パターン（Bが左） ==== */
.pt-left .item-b {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pt-left .item-a {
  grid-column: 2;
  grid-row: 1;
}
.pt-left .item-c {
  grid-column: 2;
  grid-row: 2;
}
.pt-right .item-b img,
.pt-left .item-b img{
  margin-top: 0;
  margin-bottom: 0;
}

.other-services{
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}


.supports{
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.supports li{
  text-align: center;
  margin-bottom: 0;
  width: 33.333%;
}
.supports li:first-child{
  border-right: 3px solid #fff;
}
.supports li:last-child{
  border-left: 3px solid #fff;
}

.supports li h6{
  font-size: 18px;
  font-weight: bold;
  padding: 1rem 0 0.5rem;
}

.supports li .desp{
  font-size: 13px;
  padding-bottom: 1rem;
}


.news-article{

}

.news-article .news-header{
  padding-top: 5rem;
}

.news-article .news-header time{
  font-size: 20px;
  font-family: var(--en-font-family);
}
.news-article .news-header .news-title{
  font-size: 30px;
  font-weight: bold;
}

.news-article .news-body{
  padding: 3rem 0 4rem;
  font-size: 15px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* FAQ */
.faq-title{
  display: flex;
  align-items: center;
  gap: 6rem;
}
.faq-title .ttl{
  font-size: 30px;
  font-weight: bold;
  
}
.faq-title .group-border{
  border-top: 1px solid #D9D9D9;
  flex: 1;
}

.faq-list{
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.faq-list li{
  padding: 1.5rem 0;
  border-bottom: 1px dotted #C4C4C4;
}
.faq-list li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.faq-item{
  display: flex;
  gap: 0.5rem;
}
.faq-item .char-q{
  font-size: 32px;
  font-family: var(--en-font-family);
  font-weight: 400;
}
.faq-item .faq-question{
  font-size: 18px;
  font-weight: bold;
  line-height: 34px;
}
.faq-item .faq-answer{
  padding-top: 1rem;
  font-size: 15px;
}
.faq-item .faq-answer p{
  margin: 0;
  padding: 0;
}

.faq-terms{
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  padding-bottom: 6rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  gap: 1.5rem;
}
.faq-terms.catalog-terms{
  max-width: 1200px;
}

.faq-terms .faq-anker{
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  border: 1px solid #C4C4C4;
  border-radius: 10px;
  padding: 1rem 1rem;
  align-items: center;
  color: #000;
  transition: 0.3s;
}

.faq-terms .faq-anker span{
  flex: 1;
  display: block;
  text-align: center;
}

.faq-terms .faq-anker.catalog-anker{
  border-radius: 99999px;
  font-size: 14px;
  padding: 8px 1rem;
  gap: 1rem;
}
.faq-terms .faq-anker.catalog-anker span{
  line-height: 24px;
}

.faq-terms .faq-anker.recipe-anker{
  border-radius: 99999px;
  font-size: 14px;
  padding: 6% 12px;
  gap: 1rem;
  display: block;
}

/* catalog */
.catalog-term-title{
  font-weight: bold;
  font-size: 30px;
  position: relative;
  padding-left: 1.4rem;
}
.catalog-term-title:after{
  content: '';
  width: 10px;
  height: 25px;
  position: absolute;
  left: 0;
  top: 5px;
  background-color: #2E2E2E;
}

.catalog-list{
  list-style: none;
  padding: 2rem 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 50px 50px;
}

li.catalog-item{
  width: calc(25% - 37.5px);
}
li.catalog-item.video{
  width: calc(33.3333% - 33.3333px)
}
li.catalog-item .thumbnail{
  width: 100%;
}
li.catalog-item .thumbnail.video{
  aspect-ratio: 16 / 9;
}

li.catalog-item .thumbnail img{
  width: 100%;
}
li.catalog-item .thumbnail.video img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
}

.catalog-title{
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 0;
}
.catalog-link{
  text-align: center;
}


/* Shop */
.shop-ankers{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4rem 0 8rem;
}
.shop-anker{
  width: calc(25% - 12px);
  position: relative;
  transition: 0.3s;
}

.shop-anker img{
  width: 100%;
  display: block;
}
.shop-anker .shop-info{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-anker .shop-info .inner{
  width: 100%;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.shop-anker .shop-info .inner .brand-name{
  font-size: 22px;
  color: #fff;
  font-weight: bold;
}

.shop-anker .shop-info .inner .corp-name{
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}
.shop-anker .shop-info .inner .fa-angle-right{
  color: #fff;
  font-size: 14px;
}

.shop-section{

}

.shop-cover{
  width: 100%;
  position: relative;
  margin-bottom: 3rem;
}

.shop-cover .shop-cover-img{
  width: 100%;
  display: block;
}

.shop-cover .shop-info-wrap{
  position: absolute;
  background-color: rgba(255,255,255,0.9);
  border-radius: 10px;
  width: 586px;
  top: calc(50% - 110px);
  right: calc(50% - 600px);
  left: auto;
  padding: 20px;
}

.shop-info-wrap .shop-info{
  display: flex;
  gap: 1.5rem;
}

.shop-info-wrap .shop-info img{
  width: 125px;
  height: 125px;
}
.shop-info-wrap .shop-info .shop-names{
  border-bottom: none;
  flex: 1;
}

.shop-info-wrap .shop-info .shop-names .brand-name{
  font-size: 30px;
  font-weight: bold;
}

.shop-info-wrap .shop-info .shop-names .corp-name{
  font-size: 20px;
  margin-top: 10px;
  font-weight: bold;
}
.shop-contact.sp-only{
  display: none;
}
.shop-contact.pc-only{
  display: block;
  font-size: 14px;
  margin-top: 10px;
  border-top: 1px solid #AEAEAE;
  padding-top: 10px;
}


.shop-contact .shop-row{
  display: flex;
}

.shop-contact .shop-row div{
  flex: 1;
}

.shop-intaview{
  display: flex;
  gap: 4rem;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 8rem;
}

.shop-intaview .img-wrap{
  width: calc(50% - 4rem);
}

.shop-intaview-detail{
  flex: 1;
  padding: 0;
}
.shop-intaview .shop-question{
  display: inline-block;
  font-size: 14px;
  color: #5A5A5A;
  border-radius: 9999px;
  border: 1px solid #AEAEAE;
  padding: 6px 1rem;
  margin-bottom: 1rem;
}

.shop-intaview .shop-answer-head{
  font-size: 20px;
  font-weight: bold;
  color: #1F1F1F;
  margin-bottom: 1rem;
}

.shop-intaview .shop-answer-text{
  font-size: 13px;
  color: #1F1F1F;
}

/* Recipe */
.recipe-search-ttl{
  font-size: 20px;
  margin-bottom: 2rem;
}
.recipe-terms{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.recipe-terms .recipe-anker{
  border: 1px solid #C4C4C4;
  border-radius: 99999px;
  padding: 10px 1.4rem;
  align-items: center;
  color: #5A5A5A;
  transition: 0.3s;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 120%;
}
.recipe-anker.active{
  background-color: #B3B3B3;
  border: 1px solid #5A5A5A;
  color: #000000;
}

.recipe-terms .recipe-anker span{
  text-align: center;
  display: block;
}

.recipe-terms .recipe-anker:nth-child(1),
.recipe-terms .recipe-anker:nth-child(2),
.recipe-terms .recipe-anker:nth-child(3){
  width: auto;
}
.recipe-terms .recipe-anker:nth-child(4),
.recipe-terms .recipe-anker:nth-child(5),
.recipe-terms .recipe-anker:nth-child(6){
  width: auto;
}

.recipes{
  display: flex;
  flex-wrap: wrap; 
  gap: 32px;
}

.recipes .recipe-item{
  width: calc(25% - 24px);
  transition: 0.3s;
}

.recipes .recipe-item img{
  width: 100%;
  transition: 0.3s;
}
.recipes .recipe-item .ttl{
  font-size: 13px; 
  font-weight: bold;
  color: #1F1F1F;
  padding-top: 13px;
}

/* Recipe Detail */
.recipe-article{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% + 50% */
  grid-template-rows: auto 1fr;
}

.recipe-article .item-b {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.recipe-article .item-a {
  grid-column: 2;
  grid-row: 1;
}
.recipe-article .item-c {
  grid-column: 2;
  grid-row: 2;
}


.recipe-article .recipe-title{
  font-size: 20px;
  font-weight: bold;
}

.recipe-article .terms{
  padding: 1.5rem 0 0;
  display: flex;
  gap: 10px
}


.recipe-article .term{
  border: 1px solid #C4C4C4;
  border-radius: 99999px;
  padding: 10px;
  align-items: center;
  color: #5A5A5A;
  transition: 0.3s;
  font-size: 13px;
  justify-content: center;
  align-items: center;
  line-height: 120%;
}

.recipe-article .swiper-outer{
  width: 80%;
  aspect-ratio: 1 / 1;
  padding-top: 0;
}
.recipe-article .swiper{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 10px;
}
.recipe-article .swiper .swiper-slide{
  width: 100%;
  height: 100%;
}
.recipe-article .swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-article .swiper-pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}

.recipe-article .swiper-pagination a{
  width: 10px; 
  height: 10px; 
  background-color: #5A5A5A;
  border-radius: 999px;
  transition: 0.3s;
}


.recipe-article .description{
  font-size: 15px;
  padding: 1.5rem 0 1.5rem;
  line-height: 1.8;
}

.recipe-article .detail{
  background-color: #F5F5F5;
  border-radius: 10px;
  padding: 2rem 4rem;
}

.recipe-article .detail h6{
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.recipe-article .detail span{
  font-size: 15px;
  font-weight: bold;
}

.recipe-article .detail .border{
  border: none!important;
  border-top: 1px solid #D9D9D9!important;
  flex:1;
}

.recipe-article .detail .detail-text{
  font-size: 12px; 
}


.popular-recipe{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.popular-recipe h2{
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 2rem;
}
.popular-recipe .popular-recipes{
  overflow: visible;
  display: flex;
  gap: 30px;
}

.popular-recipe .popular-recipes li{
  flex: 0 0 calc((100% - (30px * 4)) / 5);
}

.popular-recipe .popular-recipes li img{
}

.popular-recipe .popular-recipes li .ttl{
  font-size: 11px;
  font-weight: bold;
  color: #000;
  padding-top: 10px;
}

/* About */
.about-main-text{
  padding-top: 4rem;
  font-size: 15px;
  display: flex;
  justify-content: end;
}

.about-main-inner{
  width: 60%;
}

.about-4steps{
  padding: 3rem 0;
  display: flex;
  gap: 30px;
}

.about-4steps .step{
  width: calc(25% - 22.5px);
}
.about-4steps .step:last-child{
  margin-bottom: 0;
}

.about-4steps .step img{
  width: 100%;
}

.about-4steps .step b{
  display: block;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 0;
}

.about-4steps .step div{
  font-size: 13px;
}

.about-6steps{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 90px;
  ;
}

.about-6steps .step{
  width: calc(33.3333% - 60px);
}

.about-6steps .step img{
  width: 100%;
}

.about-6steps .step .step-row{
  display: flex;
  gap: 1rem;
  align-items: start;
  padding-top: 16px;
}
.about-6steps .step .step-row b{
  font-size: 20px;
  font-family: var(--en-font-family);
  font-weight: 500;
  margin-top: -6px;
}

.about-6steps .step .step-row div{
  font-size: 13px;
  font-weight: bold;
}

.about-6steps .step .step-row div p{
  margin: 0;
  font-size: 11px;
  font-size: normal;
}

.about-youtube-wrap{
  width: 880px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.about-youtube-inner{
  position: relative;
  width: 100%;
}

.youtube-frame{
  width: 100%;
  aspect-ratio: 16/9;
}
.about-youtube-inner .btns{
  text-align: right;
  padding-top: 1rem;
}

.about-video-ajast{
  padding-top: 4rem;
}

.about-items{
  padding: 4rem 0;
  display: flex;
  gap: 60px;
}

.about-items .item{
  margin-bottom: 0;
  width: calc(33.3333% - 40px);
}
.about-items .item:last-child{
  margin-bottom: 0;
}
.about-items .item img{
  width: 100%;  
}

.about-items .item b{
  font-size: 16px; 
  font-weight: bold;
  display: block;
  padding: 10px 0 5px;
}

.about-items .item div{
  font-size: 13px; 
}

.about-links{
  padding: 4rem 0 2rem;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}

.dark-sub-title{
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-color: #2E2E2E;
  display: inline-block;
  padding: 0.5rem 1rem;
}

.spec-wrap{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 4rem;

}
.spec-wrap img{
  width: 100%;
}

.spec-contant{
  padding-top: 0;
}
.spec-flex{
  padding: 2rem 0;
  display: flex;
  justify-content: space-between;
}

.spec-flex .left{
  width: 50%;
}
.spec-flex .right{
  width: 50%;
}

.spec-flex .spec-row{
  margin-bottom: 1.2rem;
}

.spec-flex .spec-row .subject{
  font-size: 16px;
  font-weight: bold;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.4;;
}
.spec-flex .spec-row .subject::before{
  content: '◆';
  position: absolute;
  left: 0;
}

.spec-flex .spec-row .text{
  font-size: 13px;
  padding-left: 1.5rem;
}

.spec-text{
  font-size: 12px;
}

.spec-text ul{
    list-style: disc;
    color: #000;
    padding: 0 0 0 1rem;
}
.spec-text ul li{
  font-size: 12px;
}

.gas-sub-ttl{
  font-size: 30px!important;
}
.gus-table{
  border: 1px solid #AEAEAE;
  margin-top: 4rem;
}
.gus-table .gus-row{
  display: flex;
  border-bottom: 1px solid #AEAEAE;
  justify-content: space-between;
}
.gus-table .gus-row:last-child{
  border-bottom: none;
}

.gus-table .gus-row .th{
  width: 400px;
  border-right: 1px solid #AEAEAE;
  background-color: #F5F5F5;
  font-size: 16px;
  font-weight: bold;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gus-table .gus-row .td{
  flex: 1;
  padding: 1rem 4rem;
}

.gus-table .gus-row .td ul{
  margin: 0;
  padding-left: 1.4rem;
}

.gus-table .gus-row .td li{
  font-size: 12px;
}

.product-warning{
  padding: 3rem 0;
  display: flex;

}

.product-warning .left{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  width: 50%;
  border-right: 1px dashed #AEAEAE;
  padding-right: 4rem;
}
.product-warning .right{
  flex: 1;
  padding-left: 4rem;
}
.product-warning h6{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.product-warning ul{
  margin: 0;
  padding: 0 0 0 1.4rem;
}
.product-warning ul li{
  font-size: 12px;
}

/* Reason */

.reasons1{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右50%ずつ */
  grid-template-rows: auto 1fr;
  gap: 20px 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.reasons1 .item-a,
.reasons1 .item-c{
  width: 100%;
  margin: 0 auto;
}
.reasons1 .item-b{
  margin: 0 auto;
}
.reasons1 .item-b img{
  width: 89.7%;
  margin-right: auto;
}

.reasons1 .item-b {
  grid-column: 1;
  grid-row: 1 / span 2; /* 左に縦長 */
}

.reasons1 .item-b .bg-image-wrap{
  width: 80%;
}
.reasons1 .item-b .bg-image-wrap img{
  width: 100%;
}


.order-step{
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  padding: 2rem 0 0;
}

.order-step .item{
  width: calc(25% - 45px);
}

.order-step .item img{
  width: 100%;
}
.order-step .item .text{
  font-size: 13px;
  padding-top: 10px;
}
.flow-img{
  padding-top: 2rem;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.flow-table .flow-row{
  border-bottom: 1px solid #2E2E2E;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 4px 0;
}
.flow-table .flow-row .th,
.flow-table .flow-row .td1,
.flow-table .flow-row .td2{
  display: flex;
  align-items: center;
}
.flow-table .flow-row .th{
  flex: 0 0 130px;
  border-right: 1px dashed #AEAEAE;
  justify-content: center;
}
.flow-table .flow-row .th b,
.flow-table .flow-row .th span{
  display: block;
  text-align: center;
}
.flow-table .flow-row .th b{
  font-size: 20px;
  margin-right: 0;
}
.flow-table .flow-row .th span{
  font-size: 36px;
  line-height: 1;
}
.flow-table .flow-row .td1{
  flex: 2;
  padding: 3rem;
  font-size: 24px;
}
.flow-table .flow-row .td2{
  flex: 8;
  padding: 3rem 2rem;
  font-size: 15px;
}


/* national-brand */
.nb1{
  width: 100%;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}

.nb1 .left{
  width: 50%;
}

.nb1 .left img{
  width: 80%;
}
.nb1 .right{
  flex: 1;
}
.nb1 .right .nb-title{
  display: block;
  font-size: 22px;
  font-weight: bold;
}

.nb1 .nb-desp{
  font-size: 15px;
  padding-top: 1.5rem;
}

.nb1 .nb-detail{
  padding-top: 1.5rem;
}
.nb1 .nb-detail .detail-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.nb1 .nb-detail .detail-head span{
  display: block;
  font-weight: bold;
  font-size: 14px;
}

.nb1 .nb-detail .detail-head .border{
  border-top: 1px solid #C4C4C4;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nb1 .nb-detail .detail-body{
  margin-top: 0.5rem;
}
.nb1 .nb-detail .detail-body .detail-row{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.nb1 .nb-detail .detail-body .detail-row .td1{
  width: 120px;
}
.nb1 .nb-detail .detail-body .detail-row .td2{
  flex: 1;
}

.nb-items{
  gap: 20px;
  margin-top: 3rem;
}
.nb-items .nb-item{
  width: calc(20% - 16px);
}

.nb-items .nb-item img{
  display: block;
  width: 100%;
  border-radius: 10px;
}
.nb-items .nb-item b{
  display: block;
  font-weight: bold;
  font-size: 16px;
  padding: 0.5rem 0;
}
.nb-items .nb-item p{
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.6;
}


.nb-items2{
}

.nb-items2 .nb-item2{
   padding-top: 3rem;
   display: flex;
   justify-content: space-between;
}

.nb-items2 .nb-item2 .item-a{
  width: 211px;
}
.nb-items2 .nb-item2 .item-a img{
  width: 100%;
}
.nb-items2 .nb-item2 .item-b{
  flex: 1;
  padding: 0 3rem;
  
}

.nb-items2 .nb-item2 .item-b b{
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.nb-items2 .nb-item2 .item-b p{
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}
.nb-items2 .nb-item2 .item-b .tag-black{
  display: inline-block;
  padding: 3px 1rem;
  font-size: 12px;
  font-weight: bold;
  background-color: #2E2E2E;
  color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-radius: 99999px;
}

.nb-items2 .nb-item2 .item-c{
  width: 423px;
}
.nb-items2 .nb-item2 .item-c img{
  width: 100%;
  border-radius: 10px;
}


/* OEM */
.oem-case{
  border: 1px solid #AEAEAE;
  border-radius: 15px;
  padding: 5px 0;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.oem-case .tag-black{
  display: inline-block;
  background-color: #2E2E2E;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 1rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  width: 105px;
}
.oem-case .item-a{
  text-align: center;
  flex: 0 0 30%;
  border-right: 1px dashed #D9D9D9;
}

.oem-case .item-a b{
  font-size: 20px;
  font-weight: 500;
  font-family: var(--en-font-family);
  display: inline-block;
  margin-bottom: 1rem;
}
.oem-case .item-a h6{
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.oem-case .item-a img{
  width: 90px;
}

.oem-case .item-b{
  text-align: center;
  margin-top: 0;
  flex: 0 0 30%;
  border-right: 1px dashed #D9D9D9;
}
.oem-case .item-name{
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-bottom: 1rem;
}
.oem-case .item-detail{
  font-size: 13px;
  color: #000;
}

.oem-case .item-c{
  text-align: center;
  margin-top: 0;
  flex: 0 0 18%;
  border-right: 1px dashed #D9D9D9;
}
.oem-case .item-d{
  text-align: center;
  margin-top: 0;
  flex: 0 0 22%;
}

.oem-case .dev-term,
.oem-case .item-packaging{
  font-size: 18px;
}
.oem-case .item-a,
.oem-case .item-b,
.oem-case .item-c,
.oem-case .item-d{
  padding: 1.5rem 1rem;
}


.oem-points{
  padding: 4rem 0;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.oem-point{
  margin-bottom: 0;
  width: calc(33.3333% - 40px);
}
.oem-point:last-child{
  margin-bottom: 0;
}
.oem-point img{
  display: block;
  width: 100%;
}

.oem-point .oem-point-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.oem-point .oem-point-head .no{
  font-family: var(--en-font-family);
  font-size: 20px;
  font-weight: 500;
  height: 38px;
  width: 38px;
  border-radius: 99999px;
  background-color: #D9D9D9;
  display: flex;
  justify-content: center; align-items: center;
}
.oem-point .oem-point-head span{
  font-size: 22px;
  font-weight: bold;
}

.oem-point .oem-point-body{
  font-size: 13px;
}
.oem-contact{
  font-size: 24px;
  margin-bottom: 1rem;
}

/* FORM */
.section-form-content{
  padding: 4rem 0 6rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.form-row{
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.form-row .form-lbl{
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 0;
  width: 250px;
}

.form-row .form-lbl .req{
  color: red;
}
.form-row .form-input{
  flex: 1;
}

.form-row .form-input .input-w60{
  width: 60%;
}
.form-row .form-input .input-w40{
  width: 40%;
}
.wpcf7 .btn-area .btn,
.wpcf7 .btn-area.two-btn .btn{
  width: 300px;
}
.input-wrap-postal-code{
  width: 40%;
}
.input-group .btn-primary{

}


/* Nitro-coffee */
.nitro-coffee-bg{
  width: 100%;
  aspect-ratio: 144 / 47;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  max-height: 470px;
}

.nitro-coffee-bg.bg1{
  background-image: url(/wp-content/themes/espuma/assets/images/nitro-coffee-bg1-pc.jpg);
}

.nitro-coffee-bg.bg2{
  background-image: url(/wp-content/themes/espuma/assets/images/nitro-coffee-bg2-pc.jpg);
}
.nitro-coffee-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.nitro-coffee-content{
  width: 60%;
  margin: 0;
}
.nitro-coffee-bg.bg1 .nitro-coffee-content{
  margin-left: auto!important;
}
.nitro-coffee-bg.bg2 .nitro-coffee-content{
  margin-right: auto!important;
}

.nitro-coffee-content .ttl{
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  line-height: 1.8;
}
.nitro-coffee-content .desp{
  padding-top: 2rem;
  padding-left: 0;
  font-size: 15px;
  color: #fff;
  line-height: 26px;
}

.nitro-coffee-content .btns{
  padding-top: 3rem;
  text-align: left;
}
.nitro-coffee-content .btns .btn{
  font-size: 16px;
}


/* beauty-carbonated-gas */
.bg-bottom-circle{
  position: relative;
  padding-bottom: calc(4rem + 80px);
}

.bg-bottom-circle::after{
  height: 80px;  /* 弧の深さ（調整可） */
}
.gas-points{
  padding: 3rem 0 0;
  display: flex;
  gap: 60px;
}
.gas-points .gas-point{
  width: calc(33.3333% - 40px);
  margin-bottom: 0;
}

.gas-points .gas-point img{
  width: 100%;
}
.gas-points .gas-point b{
  font-weight: bold;
  font-size: 16px;
  display: block;
  padding: 1rem 0;
}
.gas-points .gas-point span{
  font-size: 13px;
  display: block;
}

.sub-title-center{
  font-size: 45px;
  font-weight: bold;
  text-align: center;
}


.gas-pro{
  display: flex;
  flex-direction: row;
  margin-bottom: 4rem;
}

.gas-pro.left{
  flex-direction: row-reverse;
}
.gas-pro .gas-pro-desp{
  width: 52%;
}
.gas-pro .gas-pro-img{
  flex: 1;
}
.gas-pro.right .gas-pro-img{
  padding-left: 5rem;
}
.gas-pro.left .gas-pro-img{
  padding-right: 5rem;
}
.gas-pro .gas-pro-desp h4{
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 2rem;
}
.gas-pro .gas-pro-desp .desp{
  font-size: 15px;
}
.gas-pro-table{
  width: 60%;
  margin: 2rem 0 0;
  font-size: 12px;
}
.gap-hr{
  display: none;
  margin-bottom: 4rem;
  display: block;
}

/* Sanitation */
.sanitation-point{
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
}

.sanitation-point.right{
  flex-direction: row-reverse;
}
.sanitation-point .img{
  width: 50%;
  padding: 0;;
  padding-right: 4rem;
}

.sanitation-point.right .img{
  padding: 0;
  padding-left: 4rem;
}
.sanitation-point .desp{
  flex: 1;
}
.sanitation-point .desp h6{
  font-size: 26px;
}
.sanitation-point .desp{
  font-size: 15px;
}
.page-404 b{
  font-size: 200px;
}
.page-404 span{
  font-size: 30px;
}
/* ////////////////////// */
}