section {
   overflow: hidden;
}

.ttl{
   font-weight: 700;
   font-size: 8vw;
   line-height: 1;
}
.ttl span{
   color: #b72e00;
}
#key .photo {
   background: url("../img/horuchan/kv.jpg") no-repeat center top/cover;
}

@media only screen and (max-width: 767px) {   
   header{
      display: none;
   }
   #key .photo {
      background: url("../img/horuchan/kv_sp.jpg") no-repeat center top/cover;
      height: 118vw;
   }
	.navOpen header{
		display: block;
	}
}

/* -- -- */
.txt {
   text-align: start;
}

#lead{
   margin: 5vw 0 27vw;
}
#lead h2{
   margin-bottom: 2vw;
   text-align: center;
   letter-spacing: 0;
   line-height: 1.2;
}
#lead h2 p:nth-child(1){
   font-weight: 600;
   font-size: 5.2vw;
   margin-bottom: 3vw;
}
#lead h2 p:nth-child(2){
   font-weight: 700;
   font-size: 11.3vw;
}
#lead h2 p:nth-child(2) span{
   font-size: 153%;
}
.lead-txt{
   line-height: 1.7;
   display: flex;
   justify-content: center;
}
@media only screen and (min-width: 768px) {
   .ttl{      
      font-size: 60px;
   }
   #key .photo{
      margin-left: 0;
   }
   #lead{
      margin: 45px 0 269px;
   }
   #lead .wrap{
      width: 90%;
      display: flex;
      justify-content: flex-end;
   }
   #lead h2{
      margin-bottom: 25px;
      text-align: left;
      line-height: 1;
   }
   #lead h2 p:nth-child(1){   
      font-size: 24px;
      margin-bottom: 0;
   }
   #lead h2 p:nth-child(2){      
      font-size: 52px;
      margin-top: -13px;
   }
   #lead h2 p:nth-child(2) span{
      font-size: 80px;
   }
   .lead-txt{      
      justify-content: flex-start;
      font-size: 18px;
      line-height: 1.8;
   }
}

#about{
   margin-bottom: 15vw;
}
#about h3{
   border-bottom: 1px solid #000;
   font-size: 8vw;
   font-weight: 600;
   line-height: 1.3;
   padding-bottom: 3vw;
   margin-bottom: 5vw;
}
#about h3 span{
   color: #b72e00;
}
#about dt{
   font-weight: 600;
   line-height: 1.8;
}
#about dd{
   margin: 3vw 0 5vw;
   font-size: 14px;
   line-height: 25px;
}

#about .about2-2{
   margin-top: 10vw;
}
#about .about2-2 dt{
   text-align: center;
}
#about .about2-2 dt i{
   margin: 0 auto 5px;
   width: 30px;
   display: block;
}
#about .about-img3{
   margin: 5vw auto;
   width: 61%;
}

@media only screen and (max-width: 767px) {
   #about .wrap{
      overflow: hidden;
   }
   .about-img1{
      margin: 6vw -47% 7vw;
   }
}
@media only screen and (min-width: 768px) {
   #about{
      margin-bottom: 140px;
   }
   #about .wrap{
      /* width: calc(100% - 50px);
      max-width: 1150px;
      margin-left: 50px; */
      width: 90%;
   }
   .about1{
      position: relative;      
   }
   .about-img1{
      margin-left: -50px;
      width: calc(100% - 242px);
      height: 579px;
   }
   .about-img1 img{
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   #about h2{
      position: absolute;
      top: -100px;
      right: 0;
      z-index: 1;
      width: 392px;
   }
   #about .about2{
      margin: 70px auto 0;
      max-width: 760px;
   }
   #about h3{      
      font-size: 43px;      
      padding-bottom: 10px;
      margin-bottom: 35px;
   }
   #about .about2-1 dl{
      width: 337px;
   }
   #about .about-img2{
      width: calc(100% - 377px);
   }
   #about .about2-1 dt{
      font-size: 20px;
   }
   #about dd{
      margin: 10px 0 0 0;
		 font-size: 16px;
		 line-height: 30px;
   }
   #about .about2-2{
      margin: 40px auto 0;
      max-width: 540px;
   }
   #about .about2-2 dt{
      float: right;
      width: 260px;
		 font-size: 20px;
   }
   #about .about2-2 dt i{
      margin: 0 auto 5px;
      width: 35px;      
   }
   #about .about2-2 dd{
      font-size: 16px;
      line-height: 30px;
   }
   #about .about2-2 dd:last-child{
      float: right;
      width: 260px;
   }
   #about .about2-2 .about-img3{
      width: calc(100% - 290px);
      float: left;
      margin: 0;
   }
}

#feature{
   background-color: #b72e00;
   color: #fff;   
   font-weight: 600;
   line-height: 1.8;
   padding-bottom: 20vw;
}
#feature h2{
   font-weight: 700;
}
#feature h2 p:nth-child(1){
   line-height: 1.5;
   font-size: 6.4vw;
}
#feature h2 p:nth-child(2){
   line-height: 1.18;
   font-size: 13.3vw;
}
#feature h2 p:nth-child(2) span{
   color: #000;
}
#feature h2 p:nth-child(2) small{
   font-size: 80%;
}
.feature-txt2{
   font-weight: 500;
   font-size: 14px;
   line-height: 25px;
}
#feature h3 p:nth-child(1){
   color: #000;
   font-weight: 600;
   font-size: 4vw;
   line-height: 1;
   text-shadow: 
   -2px -2px 0 #b72e00,
   2px -2px 0 #b72e00,
   -2px 2px 0 #b72e00,
   2px 2px 0 #b72e00,
   -2px 0 0 #b72e00,
   2px 0 0 #b72e00,
   0 -2px 0 #b72e00,
   0 2px 0 #b72e00;
}
#feature h3 p:nth-child(2){
   display: inline-block;
   background-color: #000;
   font-weight: 700;
   font-size: 7.9vw;
   line-height: 1.3;
   padding: 0 2vw;
   margin: 2vw 0 4vw;
}
.feature5{
   margin-top: 20vw;
}
.feature5 .feature-ttl{
   display: flex;
   justify-content: center;
   font-weight: 600;
   font-size: 5.3vw;
   margin-bottom: 5vw;
}
.feature5 .feature-ttl p{
   justify-content: center;
   align-items: center;
}
.feature5 .feature-ttl p:before, .feature5 .feature-ttl p:after{
   content: "";
   width: 2px;
   height: 6vw;
   background-color: #fff;
   display: block;
   position: relative;
   top: 0.5vw;
}
.feature5 .feature-ttl p:before{   
   transform: rotate(-19deg);
   margin-right: 3vw;
}
.feature5 .feature-ttl p:after{   
   transform: rotate(19deg);
   margin-left: 3vw;
}
.feature5 .feature-ttl i{
   width: 7.6vw;
   display: block;
   margin-right: 2vw;
}
.feature5 ul{
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
   font-weight: 500;
   line-height: 21px;
   margin-bottom: 2vw;
}
.feature5 ul li{
   width: 50%;
   margin-bottom: 5vw;
}
.feature5 .feature-label{
   width: 76.4%;
   position: relative;
   margin: 0 auto 2vw;
}
.feature5 .feature-label span{
   display: block;
   background-color: #000;
   position: absolute;
   bottom: -1vw;
   right: 0;
   font-size: 13px;
   padding: 3px 12px;
   border-radius: 20px;
}
.feature-txt3{
   text-align: right;
   font-size: 13px;
   margin-right: 3%;
}
@media only screen and (max-width: 767px) {
   #feature .wrap{      
      width: 100%;
   }
   .feature-img1{
      margin-right: -10%;
   }
   .feature-info1{
      margin: 7vw 11% 0;
   }
   .feature-txt1{
      margin-top: 4vw;
   }
   .feature2{
      margin: 5vw auto 12vw;
      width: 84%;
   }
   .feature-info2{
      margin: 4vw auto 0;
      width: 64vw;
   }
   .feature3, .feature4{
      margin: 0 auto;
      width: 86.8%;
   }
   .feature-img3{
      width: 46.7vw;
   }
   .feature-info3{
      width: 69%;
      margin: -14vw 0 9vw auto;
      position: relative;
      z-index: 1;
   }
   #feature .feature-info3 h3 p:nth-child(2){
      font-size: 6.6vw;
   }
}
@media only screen and (min-width: 768px) {
   #feature{
      padding: 80px 30px 60px;
   }
   #feature .wrap{
      width: 95%;
      margin: 0 auto;
   }
   .feature1{
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      margin-bottom: 30px;
   }
   .feature-img1{
      order:2;
      width: calc(100% - 480px);
      max-width: 666px;
   }
   .feature-info1{
      width: 450px;
   }
   #feature h2{
      margin-bottom: 20px;
   }
   #feature h2 p:nth-child(1){
      line-height: 1;
      font-size: 36px;
   }
   #feature h2 p:nth-child(2){
      line-height: 95px;
      font-size: 76px;
   }   
   #feature h2 p:nth-child(2) small{
      font-size: 60px;
   }
   .feature-txt2{
      font-weight: 500;
      font-size: 14px;
      line-height: 25px;
   }
   #feature h3 p:nth-child(1){      
      font-size: 18px;   
   }
   #feature h3 p:nth-child(2){      
      font-size: 36px;      
      padding: 0 15px;
      margin: 10px 0 17px;
   }
   #feature .feature-info3 h3 p:nth-child(2){
      font-size: 30px;
   }
   .feature2{
      margin: 0 auto;
      max-width: 1020px;
      align-items: flex-end;
   }
   .feature-img2{
      width: calc(50% + 60px);
   }
   .feature2 .feature-info2{
      width: calc(50% - 81px);
      margin-bottom: 38px;
   }
   .feature-txt2{
      font-size: 16px;
      line-height: 30px;
   }
   .feature-info2 .feature-txt2{
      max-width: 300px;
   }
   .feature3, .feature4{
      width: calc(50% - 15px);
      align-items: flex-start;
   }
   .feature4{
      /* margin-top: 15px; */
   }
   .feature-img3{
      width: 51%;
      img{
         width: 100%;
         height: auto;
      }
   }
   .feature-info3{
      width: calc(49% + 37px);
      margin-left: -37px;
      margin-bottom: 25px;
      position: relative;
      z-index: 1;
      margin-top: 70px;
   }
   .feature-info3 .feature-txt2{
      max-width: 300px;
   }
   .feature5{
      margin-top: 80px;
   }
   .feature5 .feature-ttl{
      font-size: 24px;
      margin-bottom: 20px;
   }
   .feature5 .feature-ttl p:before, .feature5 .feature-ttl p:after{
      content: "";
      width: 2px;
      height: 35px;
      top: 5px;
   }
   .feature5 .feature-ttl p:before{         
      margin-right: 20px;
   }
   .feature5 .feature-ttl p:after{         
      margin-left: 20px;
   }
   .feature5 .feature-ttl i{
      width: 35px;      
      margin-right: 10px;
   }
   .feature5 ul{
      font-size: 20px;
      line-height: 26px;
      margin-bottom: 15px;
   }
   .feature5 ul li{
      width: 157px;
      margin: 0 8px;
   }
   .feature5 .feature-label{
      width: 100%;      
      margin: 0 auto 15px;
   }
   .feature5 .feature-label span{      
      bottom: -8px;   
      font-size: 16px;      
   }
   .feature-txt3{      
      font-size: 12px;
      margin-right: 0;
   }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
   #feature h3 p:nth-child(2){
      font-size: 31px;
   }
   #feature .feature-info3 h3 p:nth-child(2){
      font-size: 21px;
   }
   #feature h3 p:nth-child(1) {
      font-size: 16px;
   }
}
@media only screen and (min-width: 768px) and (max-width: 1120px) {
   .feature5 ul li{
      width: 154px;
   }
}

#tips{
   margin-top: 20vw;
   margin-bottom: 13vw;
}
#tips h2{
   display: flex;
   justify-content: center;
}
#tips h2 p{
   border-bottom: 1px solid #000;
   font-size: 8vw;
   font-weight: 600;
   line-height: 1.3;
   padding-bottom: 3vw;
   margin-bottom: 7vw;
}
#tips h2 p span{
   color: #b72e00;
}
#tips h3{
   font-weight: 600;
}
.tips-txt{
}
@media only screen and (max-width: 767px){
   .tips-img{
      margin: 0 auto;
      width: 61.3%;
   }
   #tips h3{
      line-height: 1.8;
      margin: 4vw 10% 3vw;
   }
   .tips-txt{
      font-size: 14px;
      line-height: 25px;
   }
}
@media only screen and (min-width: 768px){
   #tips{
      margin-top: 120px;
      margin-bottom: 120px;
   }
   #tips .wrap{
      max-width: 713px;
   }
   #tips h2 p{      
      font-size: 43px;      
      padding-bottom: 10px;
      margin-bottom: 35px;
   }
   .tips-img{
      width: calc(100% - 410px);
      margin-top: 10px;
   } 
   .tips-info{
      width: 370px;
   }
   #tips h3{
      margin-bottom: 8px;
		 font-size: 20px;
   }
   .tips-txt{
      font-size: 16px;
      line-height: 30px;
   }
}

#onlineshop{
   margin-bottom: 12vw;
}
#onlineshop .wrap{
   background: #f9f3e7;
   padding: 11vw 9% 15vw;
}
#onlineshop h2{
   text-align: center;
   margin-bottom: 7vw;
}
.online-img{
   margin: 0 auto 6vw;
   width: 87%;
}
.online-info{
   line-height: 1.8;
   justify-content: center;
   font-weight: 600;
}
.online-info .button{
   margin-top: 3vw;
}
.online-info .button a{
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 600;
   font-size: 16px;
   padding: 0 0 2vw;
   letter-spacing: 0;
}
.online-info .button a:after{
   margin-left: 20px;
}
@media only screen and (min-width: 768px){
   #onlineshop{
      margin-bottom: 180px;
   }
   #onlineshop .wrap{      
      padding: 63px 5% 75px;
      max-width: 1100px;
      width: 82%;
   }
   #onlineshop h2{
      text-align: left;
      margin-bottom: 50px;
      float: right;
      width: 43%;
      line-height: 1;
      margin-top: 40px;
   }
   .online-img{
      margin: 0;
      width: 52.8%;
      float: left;
   }
   .online-info{
      float: right;
      width: 43%;
      justify-content: flex-start;
      font-size: 20px;
   }
   .online-info .button{
      margin-top: 40px;
   }
   .online-info .button a{      
      font-size: 20px;
      padding: 0 0 5px;      
   }
   .online-info .button a:after{
      margin-left: 20px;
   }
   @media only screen and (min-width: 768px) and (max-width: 1300px) {
      #onlineshop h2{
         font-size: 4vw;
      }
   }
}

#rss{
   margin-bottom: 20vw;
}
#rss .ttl{
   text-align: center;
   margin-bottom: 7vw;
}
#rss .row{
   width: 203px;
   margin-right: 28px;
   font-weight: 600;
   line-height: 1.8;
}
#rss .rss_img {
  width: 100%;
  margin-bottom: 3vw;
}
#rss .rss_img a {
  padding-top: 75%;
  height: 0;
  position: relative;
  display: block;
}
#rss .rss_img a span {
  transition: ease 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: url("../img/horuchan/no-img.jpg") no-repeat center/100% 100%;
}
#rss .rss_img a:hover span {
  opacity: 0.8;
}
#rss .feed-info {
  font-weight: 500;
  width: 100%;
  margin-top: 5vw;
}
#rss .rss_ttl a{
  transition: ease 0.3s;
   overflow: hidden;
  -webkit-line-clamp: 2;
  display: box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}
#rss .rss_ttl a:hover {
  opacity: 0.7;
}
#rss .slider{
   position: relative;
   margin-left: 6.6%;
   padding-bottom: 15px;
}
#rss .slick-dots{
   margin-top: 7vw;
   justify-content: center;
   gap: 15px;
}
#rss .slick-dots li{
   width: 13px;
   height: 13px;
}
#rss .slick-arrow{
   position: absolute;
   bottom: 7px;   
   width: 15px;
   height: 28px;  
}
#rss .slick-dots button{
   border: 1px solid #000;
   background: #fff;
}
#rss .slick-dots li.slick-active button{   
   background: #000;
}
#rss .slick-prev{
   background: url("../img/horuchan/arrow_left.png") no-repeat center / 100% auto;
   left: calc(50% - 100px);
}
#rss .slick-next{
   background: url("../img/horuchan/arrow_right.png") no-repeat center / 100% auto;
   right: calc(50% - 100px);
}
#rss .button{
   text-align: center;
   margin-top: 2vw;
}
#rss .button a{
   font-weight: 600;
   padding: 0 0 2vw;
}

@media only screen and (min-width: 768px){
   #rss{
      margin-bottom: 100px;
      position: relative;
   }
   #rss .ttl{      
      margin-bottom: 50px;
   }
   #rss .row{
      width: 335px;
      margin-right: 60px;      
   }
   #rss .rss_img {   
   margin-bottom: 10px;
   }
   #rss .feed-info {   
   margin-top: 0;
   font-size: 20px;
   }
   #rss .slider{
      position: relative;
      margin-left: 50px;
      padding-bottom: 15px;
   }
   #rss .slick-dots{
      margin-top: 40px;
      justify-content: flex-start;
      margin-left: 55px;
   }
   #rss .slick-dots li{
      width: 16px;
      height: 16px;
   }
   #rss .slick-arrow{
      position: absolute;
      bottom: 7px;   
      width: 19px;
      height: 33px;  
   }
   #rss .slick-prev{      
      left: 10px;
   }
   #rss .slick-next{      
      right: auto;
      left: 218px;
   }
   #rss .button{
      text-align: left;
      margin-top: 0;
      position: absolute;
      bottom: 5px;
      left: 380px;
   }
   #rss .button a{      
      padding: 0 0 5px;
   }
	#rss .rss_ttl a{
		font-size: 20px;
	}
}


#press{
   background: url("../img/index/press_bg_sp.jpg") no-repeat center / cover;
   padding: 32vw 5% 13vw;
}
#press .wrap{
   background-color: rgba(255,255,255,0.77);
   padding: 18vw 6vw 11vw;
}
#press h2{
   color: #fff;
   background-color: #b72e00;
   text-align: center;
   font-size: 6vw;
   line-height: 1.5;
   padding: 4vw 0 11vw;
   position: absolute;
   top: -20vw;
   left: 50%;
   transform: translateX(-50%);
   width: 87%;
   clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
#press .press-ttl{
   text-align: center;
   font-weight: 600;
   font-size: 6.7vw;
   line-height: 1.44;
   display: flex;
   justify-content: center;
   margin-bottom: 4vw;
}
#press .press-ttl p{
   position: relative;
   padding: 0 2vw;
}
#press .press-ttl p:before, #press .press-ttl p:after{
   content: "";
   display: block;
   width: 20px;
   height: 30px; 
   position: absolute;
   bottom: 0;   
}
#press .press-ttl p:before{
   background: url("../img/index/press_deco1.png") no-repeat center / 100% auto;
   left: 0;
   transform: translateX(-100%);
}
#press .press-ttl p:after{
   background: url("../img/index/press_deco2.png") no-repeat center / 100% auto;
   right: 0;
   transform: translateX(100%);
}
#press .press-txt1{
   line-height: 1.5;
   margin-bottom: 3vw;
}
#press .press-txt2{
   text-align: center;
   margin-bottom: 6vw;
}
#press .press-txt2 p{
   border: 1px solid #000;
   background-color: #fff;
   font-weight: 600;
   font-size: 3.9vw;
   line-height: 1.7;
   padding: 2vw 0;
   position: relative;
}
#press .press-txt2 p:after{
   content: "";
   display: block;
   width: 16px;
   height: 16px;
   background: url("../img/index/press_arrow.png") no-repeat center / 100% auto;
   position: absolute;
   bottom: 3px;
   left: 50%;
   transform: translate(-50%,100%);
   z-index: 1;
}
#press .press-img{
   flex-wrap:wrap;
}
#press .press-img figure{
   width: 50%;
}
#press .tel{
   text-align: center;
   color: #b72e00;
   font-size: 16px;
   font-weight: 500;
   margin: 10px 0 20px;
}
#press .tel .df{
   justify-content: center;
   align-items: center;
   font-size: 38px;
   font-weight: 700;
}
#press .tel .df i{
   width: 25px;   
}
@media only screen and (max-width: 767px) {
	#press{
		margin-bottom: 20vw;
	}
}
@media only screen and (min-width: 768px) {
   #press{
      background: url("../img/index/press_bg.jpg") no-repeat center / cover;
      padding: 150px 30px 110px;
   }
   #press .wrap{      
      padding: 80px 30px 60px;
      max-width: 1000px;
      text-align: center;
   }
   #press h2{
      font-size: 37px;      
      padding: 20px 0 45px;      
      top: -55px;      
      width: 786px;
      clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
   }
   #press .press-ttl{      
      font-size: 34px;      
      margin-bottom: 20px;
   }
   #press .press-ttl p{      
      padding: 0 15px;
   }
   #press .press-ttl p:before, #press .press-ttl p:after{      
      width: 25px;      
   }
   #press .press-txt1{
      line-height: 30px;
      margin-bottom: 30px;
   }
   #press .press-txt2{
      margin-bottom: 23px;
      display: flex;
      justify-content: center;
   }
   #press .press-txt2 p{
      font-size: 18px;
      padding: 0 40px;
      line-height: 35px;
   }
   #press .press-img{
      margin: 0 auto;
      max-width: 804px;
   }
   #press .press-img figure{
      width: 25%;
   }
   #press .tel{
      justify-content: center;   
      align-items: center;    
      margin: 30px 0 25px;
      line-height: 26px;
      text-align: left;
   }
   #press .tel .df{      
      font-size: 70px;
      line-height: 1;
      margin-left: 10px;
   }
   #press .tel .df i{
      width: 42px;   
   }
   #press .tel > p:nth-child(1){
      margin-top: 20px;
   }
   #press .btn-global{
      margin: 0 auto;
      max-width: 415px;
   }
}