@charset "utf-8";
/* スマホ
----------------------- */
@media(min-width:481px){

}
/* PC
----------------------- */
@media screen and (max-width: 1748px) {
  .inner{
    min-width: 75%;
  }
}
/* タブレット
----------------------- */
@media all and (max-width: 769px) {
  .inner{
    min-width: 75%;
  }
}
/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  .inner{
    max-width: 90%;
  }
}
/* -----------------------
=========================
【TOP】
========================
----------------------- */
.topapp {
  background-image: url(../images/bg.png);
  background-size: cover;
}
/* 
mainvisual
----------------------- */
#mainV{
  background-image: url(../images/bg.png);
  background-size: contain;
  padding: 80px 0 80px;
}

/* タブレット
----------------------- */
@media screen and (max-width: 768px) {

}

/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
  
}


/* 
３つのポイント
----------------------- */
#topPoint{
  /*padding: 130px 0 250px;*/
  padding: 65px 0 125px;
}
#topPoint h2{
  width: 100%;
  font-size: 4.0rem;
  font-weight: bold;
  padding: 30px 0;
  text-align: center;
  position: relative;
}
#topPoint h2::before{
  content: '';
  width: 400px;
  height: 4px;
  display: inline-block;
  background-color: #F2A88E;
  position: absolute;
  top: 10px;
  left: calc(50% - 200px);
}
#topPoint h2::after{
  content: '';
  width: 400px;
  height: 4px;
  display: inline-block;
  background-color: #F2A88E;
  position: absolute;
  bottom:  10px;
  left: calc(50% - 200px);
}
.pointBox{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin:40px 0 0;
}
.pont1 .nobr,.pont3 .nobr{
  width: 42%;
  padding: 10px 1em;
  border: 1px solid #a0a2a2;
  border-radius: 0 50px 50px 50px;
}
.pont2 .c_nobr {
  width: 42%;
}
.pont2 .l_dtl{
  width: 55%;
  padding: 10px 1em;
  border: 1px solid #a0a2a2;
  border-radius: 0 50px 50px 50px;
}
.pont1 .nobr .nobrInner,.pont3 .nobr .nobrInner{
  border: 1px solid #94d1ca;
  border-radius: 0 50px 50px 50px;
  padding: 30px 1em 10px;
  min-height: 100%;
}
.pont2 .l_dtl .l_dtlInner{
    border: 1px solid #94d1ca;
  border-radius: 0 50px 50px 50px;
  padding: 10px 1em;
  min-height: 100%;
}

/*.pont1 .nobr .nobrInner{
  min-height: 100%;
}*/
.pont1 .nobr .nobrInner p:nth-of-type(1),.pont3 .nobr .nobrInner p:nth-of-type(1),.pont2 .c_nobr p:nth-of-type(1){
  font-size: 4.0rem;
  text-align: center;
  font-weight: bold;
  color: #52C1B0;
}
.pont1 .nobr .nobrInner p:nth-of-type(2), .pont3 .nobr .nobrInner p:nth-of-type(2),.c_nobr p:nth-of-type(2){
  font-size: 2.3rem;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding: 0px 0 20px;
  margin: 20px 0 0;
}

.pointBox .nobr .nobrInner p:nth-of-type(2)::after {
  content: '';
  width: 110px;
  height: 2px;
  display: inline-block;
  background-color: #dcdcdc;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 50px);
}
.pont2 .c_nobr p:nth-of-type(2)::after{
  content: '';
  width: 110px;
  height: 2px;
  display: inline-block;
  background-color: #dcdcdc;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 50px);
}
.pont1 .nobr .nobrInner p:nth-of-type(3),.pont3 .nobr .nobrInner p:nth-of-type(3),.c_nobr p:nth-of-type(3){
  font-size: 2.0rem;
  margin: 55px 0 0;
}
.pointBox .dtl {
  width: 55%;
  padding: 20px 1.5em;
  border-radius: 50px 50px 0 50px;
  border: 11px solid #94D1CA;
}
.pont2 .c_nobr{
  padding: 20px 1.5em;
  border-radius: 50px 50px 0 50px;
  border: 11px solid #94D1CA;
}

.pointBox .dtl > div:nth-child(1){
  margin: 10px 0 0;
}
.pointBox .dtlCatch{
  margin: 30px 0 0;
  text-align: center;
  font-size: 2.0rem;
  font-weight: bold;
}
.pont1 .dtl .dtlCatchBox{
  text-align: center;
}
.pont1 .dtl .dtlCatchBox > p:first-child{
  font-size: 3.8rem;
  color: #78afa9;
  font-weight: bold;
}
.pont1 .dtl .dtlCatchBox > p:nth-child(2){
  width: 100%;
  font-size: 3.2rem;
  font-weight: bold;
  /*margin-left: 1em;*/
}
.pointBox .dtlCatch span{
  background-image: linear-gradient(transparent 50%, #F6F563 50%);
}
.pont1 .dtl .imgCap{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 30px 0 0;
}

.pont1 .dtl .imgCap div:nth-child(1){
  width: 40%;
}
.pont1 .dtl .imgCap div:nth-child(2){
  width: 57%;
}
.pont2 .l_dtl .l_dtlInner div:nth-child(2){
/*width: 85%;*/
margin: 20px auto 0;
}
.pont2 .l_dtl .l_dtlInner p:nth-child(3){
  text-align: center;
  font-size: 2.0rem;
  font-weight: bold;
  margin-top: 20px;
}
.pont2 .l_dtl .l_dtlInner p:nth-child(3) span{
  background-image: linear-gradient(transparent 30%, #f2a88e 95%);
}
.pont3 .dtl p:nth-child(1){
  width: 85%;
  margin: auto;
  background-color: #EB5E55;
  padding: 5px 1em;;
  font-size: 2.4rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
  
}
.pont3 .dtl div:nth-child(3){
/*width: 85%;*/
  margin: 20px auto 0;
}
.pont3 .dtl p:nth-child(4){
  margin: 20px 0 0;
  font-size: 2.0rem;/**/
}
.pont3 .dtl p:nth-child(4) span{
  background-image: linear-gradient(transparent 30%, #f2a88e 95%);
}
/* PC
----------------------- */
@media screen and (max-width: 1748px) {

 }
/* タブレット
----------------------- */
@media screen and (max-width: 769px) {
/* 
３つのポイント
----------------------- */
  .pointBox{
    display: block;
  }
  .pont1 .nobr,.pont3 .nobr,.pont2 .c_nobr{
    width: 95%;
    margin: auto;
  }
  .pont1 .dtl,.pont3 .dtl,.pont2 .l_dtl{
    width: 95%;
    margin: 20px auto 0;
  }
  .pont1 .nobr .nobrInner,.pont3 .nobr .nobrInner,.pont2 .l_dtl .l_dtlInner{
    padding: 20px 1em 30px;
  }
  #topPoint {
    padding: 80px 0;
}

}

/* スマホ
----------------------- */
@media all and (max-width: 480px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
/* 
mainvisual
----------------------- */
  #mainV{
    padding: 80px 0 40px;
  }
/* 
３つのポイント
----------------------- */
  #topPoint{
    padding: 40px 0;
  }
  #topPoint h2{
    font-size: 2.4rem;
  }
  #topPoint h2::before{
    width: 200px;
    left: calc(50% - 100px);
  }
  #topPoint h2::after{
    width: 200px;
    left: calc(50% - 100px);
  }
  .pont1 .dtl .imgCap{
    display: block;
  }
  .pont1 .dtl .imgCap div:nth-child(1){
    width: 95%;
    margin: auto;
  }
  .pont1 .dtl .imgCap div:nth-child(2){
    width: 95%;
    margin: 20px auto 0;
  }
  .pont3 .dtl p:nth-child(1),.pont3 .dtl p:nth-child(4){
    font-size: 1.6rem;
  }
  .pont1 .nobr .nobrInner p:nth-of-type(3), .pont3 .nobr .nobrInner p:nth-of-type(3), .c_nobr p:nth-of-type(3){
    font-size: 1.6rem;
  }
  .pont1 .nobr .nobrInner p:nth-of-type(2), .pont3 .nobr .nobrInner p:nth-of-type(2), .c_nobr p:nth-of-type(2){
    font-size: 2.0rem;
  }
  .pont1 .dtl .dtlCatchBox{
    display: block;
  }
  .pont1 .dtl .dtlCatchBox > p:first-child{
    font-size: 2.2rem;
  }
  .pont1 .dtl .dtlCatchBox > p:nth-child(2){
    margin: 0;
    font-size: 2.0rem;
  }
  .pont1 .dtl .dtlCatchBox > div:nth-child(1) .salesShop{
    font-size: 1.2rem;
  }
}

/* 
安心で美味しい
----------------------- */
section .cookbg{
  background: url(../images/cook_bg.png) no-repeat center 0 / auto;
  /*background-color: #f4f4f4;*/
}
.cookWarp{
  padding: 130px 0;
}
.cookWarp h3{
  font-size: 4.0rem;
  font-weight: bold;
  background-color: rgba(246,245,99,0.6);
  padding: 10px .5em;
  text-align: center;
}
.cookWarp .cookAbt > div{
  width: 37%;
  margin: 80px auto 0;
}
.cookWarp .cookAbt > div p.salesShop{
  color: #fff;
  margin-top: 20px;
}
.cookWarp .cookAbt > p{
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  margin: 40px auto 0;
  padding: 20px 1.5em;
  text-align: center;
}
.cookWarp .cookBox > div{
  margin: 40px 0 0;
  background-color: rgba(255,255,255,0.45);
  padding: 15px 1.5em;
  border-radius: 30px 30px 0 30px;
  font-size: 2.0rem;
  font-weight: bold;
}
.cookWarp .cookBox .cookBox01{
  position: relative;
  background: url(../images/cook01-2.png) no-repeat right 87px / 30% rgba(255,255,255,0.45);
}
.cookWarp .cookBox .cookBox01::before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: url(../images/cook01-1.png) no-repeat center 0 / contain;
  background-size: 100% auto;
}
.cookWarp .cookBox .cookBox02{
  position: relative;  
}
.cookWarp .cookBox .cookBox02::before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: url(../images/cook02-1.png) no-repeat center 0 / contain;
  background-size: 100% auto;
}
.cookWarp .cookBox .cookBox03{
  position: relative;  
}
.cookWarp .cookBox .cookBox03::before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: url(../images/cook03-1.png) no-repeat center 0 / contain;
  background-size: 100% auto;
}
.cookWarp .cookBox .cookBox01 > p,.cookWarp .cookBox .cookBox02 > p,.cookWarp .cookBox .cookBox03 > p{
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
.cookWarp .cookBox .cookBox01 > p span,.cookWarp .cookBox .cookBox02 > p span,.cookWarp .cookBox .cookBox03 > p span{
  background-image: linear-gradient(transparent 50%, #F6F563 50%);
}
.cookWarp .cookBox .cookBox01 > div{
  width: 60%;
  margin: 40px 0 20px;
}
.cookWarp .cookBox .cookBox02 .func{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 40px 0 10px;
}
.cookWarp .cookBox .cookBox02 .func > div:nth-child(1),.cookWarp .cookBox .cookBox02 .func > div:nth-child(2){
  width: 48%;
}
.cookWarp .cookBox .cookBox02 .func >div{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.cookWarp .cookBox .cookBox02 .func .func01 > div:nth-child(1){
  width: 55%;
}
.cookWarp .cookBox .cookBox02 .func .func01 > div:nth-child(2){
  width: 43%;
}
.cookWarp .cookBox .cookBox02 .func .func02 > div:nth-child(1){
  width: 55%;
}
.cookWarp .cookBox .cookBox02 .func .func02 > div:nth-child(2){
  width: 43%;
}
.cookWarp .cookBox .cookBox03{
  position: relative;
  background: url(../images/cook03-2.png) no-repeat right 87px / 40% rgba(255,255,255,0.45);
}
.cookWarp .cookBox .cookBox03 .eco {
  width: 60%;
  margin: 40px 0 20px;
}
.cookWarp .cookBox .cookBox03 .eco ul{
  font-size: 1.6rem;
  font-weight: normal;
}
.cookWarp .cookBox .cookBox03 .eco ul li{
  text-indent: -1em;
  padding-left: 1em;
}

/* PC
----------------------- */
@media screen and (max-width: 1748px) {
  .cookWarp .cookBox .cookBox03{
    background: url(../images/cook03-2.png) no-repeat right 70px / 40% rgba(255,255,255,0.45);
  }
 }

/* タブレット
----------------------- */
@media screen and (max-width: 769px){
  section .cookbg {
    background: url(../images/cook_bg.png) no-repeat center 0 / cover;
  }
  .cookWarp h3{
    font-size: 3.2rem;
  }
  .cookWarp .cookAbt > div {
    width: 50%;
    margin: 40px auto 0;
  }
  .cookWarp .cookAbt > p{
    font-size: 2.0rem;
  }
  .cookWarp .cookBox > div{
    padding: 15px 1em;
    font-size: 1.6rem;
  }
  .cookWarp .cookBox > div:nth-child(1){
    margin: 20px 0 0;
  }
  .cookWarp .cookBox .cookBox01 > p, .cookWarp .cookBox .cookBox02 > p, .cookWarp .cookBox .cookBox03 > p{
    font-size: 2.0rem;
  }
  .cookWarp .cookBox .cookBox01{
    background: url(../images/cook01-2.png) no-repeat right 95px / 40% rgba(255,255,255,0.45);
  }
  .cookWarp .cookBox .cookBox01::before,.cookWarp .cookBox .cookBox02::before,.cookWarp .cookBox .cookBox03::before{
    width: 40px;
    height: 40px;
  }
  .cookWarp .cookBox .cookBox02 .func >div{
    align-items: center;
  } 
   .cookWarp .cookBox .cookBox03{
    background: url(../images/cook03-2.png) no-repeat right 170px / 44% rgba(255,255,255,0.45);
  }
  .cookWarp .cookBox .cookBox03 .eco ul{
    font-size: 1.4rem;
  }
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  section .cookbg {
    background: url(../images/cook_bg.png) no-repeat center 0 / cover;
  }
  .cookWarp {
    padding: 100px 0;
  }
  .cookWarp h3{
    font-size: 2.0rem;
  }
  .cookWarp .cookAbt > div{
    width: 95%;
    margin: 10px auto 0;
    text-align: center;
  }
  .cookWarp .cookAbt > p {
    font-size: 1.6rem;
    padding: 20px 0;
    margin: 20px auto 0;
  }
  .cookWarp .cookBox .cookBox01 > p, .cookWarp .cookBox .cookBox02 > p, .cookWarp .cookBox .cookBox03 > p {
    font-size: 2.0rem;
    margin: 40px 0 0;
  }
  .cookWarp .cookBox .cookBox01 {
    background: url(../images/cook01-2.png) no-repeat center 290px / 80% rgba(255,255,255,0.45);
  }
  .cookWarp .cookBox .cookBox01 > div{
    width: 100%;
  }
  .cookWarp .cookBox > div:nth-child(1) {
    margin: 20px 0 0;
    min-height: 500px;
    background-position-y: 95%;
  }
  .cookWarp .cookBox .cookBox02 .func{
    display: block;
  }
  .cookWarp .cookBox .cookBox02 .func > div:nth-child(1), .cookWarp .cookBox .cookBox02 .func > div:nth-child(2) {
    width: auto;
  }
  .cookWarp .cookBox .cookBox02 .func > div:nth-child(2){
    margin-top: 20px;
  }
  .cookWarp .cookBox .cookBox03 .eco {
    width: 100%;
    margin: 40px 0 20px;
  }
  .cookWarp .cookBox > div:nth-child(3){
    min-height: 500px;
    background-position-y: 95%;
  }
  .cookWarp .cookBox .cookBox03 {
    background: url(../images/cook03-2.png) no-repeat center 3330px/ 80% rgba(255,255,255,0.45);
  }

}








/* -----------------------
=========================
【】
========================
----------------------- */



/* -----------------------
=========================

========================
----------------------- */

/* タブレット
----------------------- */
@media all and (max-width: 768px) {
  
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  
}
/* -----------------------
=========================
BOTTOM申し込み
========================
----------------------- */
#secApp{
  background:url(../images/bg.png) no-repeat center 0 / cover ;
}
/* タブレット
----------------------- */
@media all and (max-width: 768px) {
  
}
/* スマホ
----------------------- */
@media all and (max-width: 480px){
  /*#secApp{
    padding: 80px 0;
  }*/
}