@charset "utf-8";

/* top-page */
/*----- heroheader ------*/
.toppage{
  h1, h3, p{
    line-height: 170%;
  } 
}
.hero-header{
   display: flex;
  }
.hh-box01 {
    background-color: #3a6f3b;
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .hh-box01a{
      width: 390px;
      margin: 0 auto;
      h1{
        font-size: 36px;
      }
    }
  }
.top-btn{
  margin: 5%;
  display: flex;
  justify-content: center;
  .btn{
    width: 198px;
    height: 40px;
    background-color: #EFBE7D;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.hero-header h1 {
    color: #f4f4ec;
}
.px48{
  font-size: 48px;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
@media only screen and (max-width: 780px){
  .hero-header {
    /* display: flex; */
    flex-direction: column-reverse;
  }
  .hh-box01{
    width: 100vw;
  }
  .hh-box01a{
    padding: 3% 0;
    
  }
}
/*---------------- Dog Food Scrol----------*/
.foodscroll{
  max-width: 1440px;
  margin: 0 auto;
  h2{
    margin-bottom: 5%;
  }
  .bigbox{
    display: flex;
    justify-content: space-around;
    margin-top: 5%;
  }
  .box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 288px;
    h3{
      text-align: initial;
      margin-bottom: 5%;
    }
  }
  .box01{
    display: none;
  }
  .slider{
    position: relative;
    width: 520px;
    div {
        &:first-child {
            position: absolute;
            right: 0;
            overflow: hidden;
            height: 520px;
            width: 0;
            border-left: 3px solid #F4F4EC;
            img {
                position: absolute;
                right: 0;
                width: 520px;
                max-width: inherit;
            }
        }
    }
  }
}
.center{
  text-align: center;
}


/*--------- recommended-item / おすすめ商品 --------*/
.recommended-item{
  margin: 150px auto 75px;
}
/*-------- scroll bar　 ベルトコンベヤー ----------*/
TML CSSResult Skip Results Iframe
EDIT ON
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --scroll-gap: 30px;
}

@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--scroll-gap) / 2));
  }
}
.scroll_wrap {
  width: 100%;
  overflow: hidden;
  background-color: #5E584E;
  padding: 0.3% 0;
}
.scroll_track {
  width: max-content;
  animation: infiniteScroll 20s linear infinite;
  &:hover {
    animation-play-state: paused;
  }
}
.scroll_inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--scroll-gap);
}
.scroll_cont {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  min-width: 22vw;
  color: white;
  .box{
    display: flex;
    align-items: center;
   p{
    margin-left: 2em;
   }
  }
}
/*-------- delivery-system/配送までの流れ ---------*/
.delivery-system{
  max-width: 1440px;
  margin: 150px auto 150px;
  h2{
    color: #5E584E;
    margin-bottom: 5.2%;
  }
  .ds-box{
    display: flex;
    justify-content: center;
    .img-m{
      margin: 0 5%;
    }
  }
  .img{
    margin: 3% 0 5%;
  }
  p{
    text-align: center;
    margin-top: 5%;
    line-height: 200%;
  }
}

/* -----------opinion/推薦コメント-------------- */
.opinion{
  background-color: #3a6f3b;
  padding: 10.2% 0;
  color: #fff;
  margin-top: 8%;
}
.op-box{
  max-width: 880px;
  margin: 0 auto;
  padding: 0 2%;
  h3{
    margin-bottom: 5%;
  }
  ul .bxslider li img{
    width:100%;	
  }
}
.bold{
  margin-top: 2%;
  font-weight: 500;
}


/*------------ Review/お客さまの声 -------------*/
.review{
  max-width: 1440px;
  margin: 150px auto 75px;

  p{
    text-align: center;
    margin-top: 2%;
  }
  .box{
    /* max-width: 270px; */
    background-color: #fff;
    border-radius: 0 0 30px 30px;
    padding: 2%;
    .left{
      text-align: left;
    }
  }
  .slide-items {
    width:100%;
    display: flex;
    margin: 5% auto;
    }
    .slide-items2 {
    width:100% ;
    overflow: hidden;
    }
    .slide-items li {
    /* height: auto; */
    padding-right: 20px;
    padding-left: 20px;
    }
    .slide-items img {
    width: 100%;
    object-fit: cover;
    }
}
/*---------------- Phone site -------------------*/
@media only screen and (max-width: 1060px){
  .foodscroll{
    .bigbox{
      flex-direction: column;
    }
    .box{
      display: flex;
      padding: 0 1%;
      h3{
        margin-top: 5%;
      }
    }
    .box02{
      display: flex;
      justify-content: space-around;
    }
    .box-no{
      display: none;
    }
    .box01{
      display: inherit;
      display: flex;
      justify-content: space-around;
      
    }
  } 
}

@media only screen and (max-width: 520px){
  .foodscroll{
    .slider{
      width: 375px;
      div {
        &:first-child {
            height: 375px;
            img {
                width: 375px;
            }
        }
    }
    }
  }
  .hh-box01{
    .hh-box01a{
      width: 350px;
    }
  }
  .box01 {
      flex-direction: column;
      align-items: center;
      .box{
        h3 {
          text-align: inherit;
        }
        p{
          text-align:center;
        }
      }
     
  }
  .px48{
    font-size: 40px;
  }
  .delivery-system {
    .ds-box {
        max-width: 350px;
        margin: 0 auto;
        flex-direction: column;
        gap: 30px;
        div{
          margin-top: 3%;
        }
    }
}
.op-box{
  h3{
    font-size: 18.5px;
  }
}
}
div {
  /* border: 2px solid #000; */
}
section {
  /* border: 2px solid #000; */
}

  /*--------------------------
   山ちゃんのところ　ウェット一段目 
   -------------------------*/
.item{
  display: flex;
  gap: 90px;
  max-width: 1440px;
  margin: 75px auto 0;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}


/* 商品値段 */
.syouhin_box{
  margin-top: 20px;

}

.syouhin_box h3{
font-weight: 500;
margin-bottom: 10px;
}

.bun{text-align: center;}

.enn{font-size: 24px;
  font-weight: bold;
}
.zeikomi{
  font-size: 12px;}

  
  /* お知らせpage */
  
  .pures0:hover, .pures1:hover, .pures2:hover {
  cursor: pointer;
  }
  .pures0{
  /* border: 1px solid red; */
  width:360px;
  padding:30px 0;
  border-radius: 100px;
  background-color:#EFBE7D;
  color:#5E584E;
  }
  
  .pures1{
  /* border: 1px solid red; */
  width:360px;
  padding:30px 0;
  border-radius: 100px;
  background-color:#EFBE7D;
  color:#5E584E;
  }
  
  .pures2{
  /* border: 1px solid red; */
  width:360px;
  padding:30px 0;
  border-radius: 100px;
  background-color:#EFBE7D;
  color:#5E584E;
  }
  
  
  
  .news_link {
  max-width:1440px;
  display: flex;
  gap:90px;
  margin:0 auto;
  align-items:flex-end;
  justify-content: space-around;
  
  }
  
  .page0{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  }
  
  .page2{
  margin-right:20px;
  margin-bottom: -10px;
  z-index:1.5;
  }
  
  .tages0{
  border-radius: 30px 30px 0px 0px;
  width:360px;
  background-color: #fff;
  border: 1px solid #5E584E;
  display:flex;
  align-items: center;
  
  
  }
  
  .tages01{
  margin-left: 30px;
  }
  
  .media{
  font-size: 24px;
  font-weight:600; 
  }
  
  .tages00{
  border-radius:0px 0px 30px 30px;
  width:360px;
  height:240px;
  background-color: #fff;
  border: 1px solid #5E584E;
  align-items: center;
  padding:30px;
  }
  
  .tages03{
  border-radius:30px;
  background-color:#5E895E;
  width: 120px;
  }
  
  .medeia1{
  padding:10px; 
  color:#ffffff;
  }
  
  .hiduke{
  margin-top:10%;
  margin-bottom:10px;
  font-weight:600;
  }
  
  .news0{
  display: flex;
  max-width:1440px;
  margin: 0 auto;
  justify-content:space-around;
  flex-wrap: wrap;
  gap:90px;
  position: relative;
  margin-top:-50px;
  margin-bottom:75px;
  }
  
  /* pagination */
  .pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 45px;
  }
  
  .inu{
  margin-top:75px ;
  margin-right:1000px;
  
  }
  
  .inu2{
  margin-left:506px;
  margin-top: -300px;
  
  }
  
  .medeia12{
  text-align: center;
  padding:10px;
  color:#ffffff;
  
  }
  
  .tages0303{
  border-radius:30px;
  background-color:#EFBE7D;
  width: 120px;
  
  
  }
  
  .snews a:hover {
  opacity: 1;
  
  }
  
  
  .hone{
  display: flex;
  margin: 75px 0;
  font-size: clamp(3.8rem, 3.73rem + 0.188vw, 4rem);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  
  p{
  text-align: center;
  font-weight: 700;
  
  }
  
  img{
  width: 40px;
  
  }
  
  }
  
  .hone1{
  display:none;
  
  }
  
  .news-r{
line-height:170%;}
  
  /* 会社概要 */
  
  
  .gaiyou{
  background-image:url(../assets/../img/Group-193.png);
  background-repeat: no-repeat;
  /* position: relative; */
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  margin-top:7.8%;
  
  }
  
  .kai{
  position:absolute;
  top:2%;
  left:2%;
  z-index:2;
  color: #ffffff;
  
  }
  
  .sya{
  position:absolute;
  top:-3%;
  left:16%;
  z-index:2;
  color: #ffffff;
  }
  
  .ri{
  position:absolute;
  top:-3%;
  left:29%;
  z-index:2;
  color: #ffffff;
  
  }
  
  .nen{
  position:absolute;
  top:0;
  left:42%;
  z-index:2;
  color: #ffffff;
  
  }
  
  
  .kenkou1{
  margin-top:300px;
  justify-content: center;
  }
  
  .aiken{
  color: #ffffff;
  margin-top:5%;
  margin-left: 4%;
  
  }
  
  .aiken br{
  display:none
  
  }
  
  .ul{
  margin-top:30px;
  margin-left: 10%;
  line-height:170%;
  color: #ffffff;
  margin: 16px auto;
  text-align: center;
  display: block;
  
  }
  
  .inner {
  max-width: 1000px;
  margin: 0 auto;
  }
  
  .text-left-margin-auto {
  display: table;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
  color:#ffffff;
  line-height: 170%;
  padding-top: 5%;
  }
  
  
  
  
  .inu3{
  margin-top:50px; 
  
  
  }
  
  .owan{
  background-image: url(../img/owan.png);
  background-repeat: no-repeat;
  max-width: 634px;
  margin: -120px auto 0;
  /* position: relative;
  margin-left:3%;
  margin-top:-100px; */
  }
  
  
  /* table01 */
  
  
  #table01{
  padding: 26% 0 5%;
  display: flex;
  justify-content: space-around;
  }
  
  
  
  #table01 tr{
  border-bottom: 1px solid;
  border-bottom-color: #ada5a5;
  padding: 5px 0;
  }
  
  #table01 tr:last-child{
  border-bottom:none;
  
  }
  
  #table01 th,
  #table01 td {
  padding: 5px 0;
  text-align: left;
  }
  
  #table01 th {
  width: 30%;
  }
  
  .kai1{
  display:none;
  }
  
  
  
  /* 会社理念レスポンシブデザイン */
  @media only screen and (max-width:1000px) {
  /* 1000px以下の画面サイズで適用されるスタイル */
  .gaiyou{
  background-image: none;
  
  }
  
  .kai1{
  display:inherit;
  margin-top:7.8%;
  }
  
  .gaiyou1{
  /* max-width: 375px; */
  /* margin: 0 auto; */
  }
  
  .text-left-margin-auto {
  display: inline-block;
  color:#5E584E;
  text-indent: -2rem;
  padding-left: 2rem;
  
  
  }
  
  .text-left-margin-auto br{
  display:none;
  
  
  
  }
  
  .aiken{
  color:#5E584E;
  margin-top:5%;
  margin-left: inherit;
  margin-bottom:5%;
  
  }
  
  .kenkou1{
  margin-top: 0;
  justify-content: center;
  }
  
  
  .owan{
  background-image:none ;
  background-color:#EFBE7D;
  border-radius:30px;
  width: 300px;
  height:300px;
  border:1px solid #5E584E ;
  
  }
  
  .gaiyou0{
  max-width: 350px;
  margin: 0 auto 75px;
  }
  
  
  .text-left-margin-auto br {
  margin-left:4%;
  }
  
  
  .aiken br{
  display:inherit
  
  }
  
  .inu{
  margin-right:0;
  }
  
  
  .inu2{
  margin-left:0;
  
  
  }
  
  .hone1{
  display: flex;
  margin: 50px 0;
  font-size: clamp(3.8rem, 3.73rem + 0.188vw, 4rem);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  
  p{
  text-align: center;
  font-weight: 700;
  
  }
  
  img{
  width: 40px;
  margin-top: 15px;
  }
  
  }
  
  }
  
  /* newsレスポンシブ */
  
  @media only screen and (max-width:1100px) {
  /* 1000px以下の画面サイズで適用されるスタイル */
  
  .news_link {
  flex-direction:column;
  align-items: center;
  gap:30px;
  
  }
  
  .news0{
  column-count: 2;
  gap:30px;
  justify-content: center;
  
  }
  
  
  .snews{
  margin: 0 auto 75px;
  
  }
  
  .page2{
  display:none;
  }
  .news0 {
    margin-bottom: 0;
  }
  
  }
  

/* 商品一覧 */




.iti1 img{
  width: 40px;}


.itaran h2{margin-top: 75px;}
.itiran p{text-align: center;}
.itiran1 p {    
  text-align: center;
  margin-top: 10px;}

/* ウェット一段目 */
.item{
  display: flex;
  gap: 90px;
  max-width: 1440px;
  margin: 75px auto 0;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}


/* 商品値段 */
.syouhin_box{
  margin-top: 20px;

}

.syouhin_box h3{
margin-bottom: 10px;
}

.bun{text-align: center;}

.enn{font-size: 24px;
  font-weight: bold;
}
.zeikomi{
  font-size: 12px;}

/* ウェット2段目 */
.item2{
  display: flex;
  gap: 90px;
  margin: 75px auto 0;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

/* ドライフード */
.itiran2 h2{
  margin-top: 150px;}

.itiran2 p{text-align: center;
         margin-top: 10px;}

.item2{
  margin-top: 75px;
}

/* ミックス */
.mix_bun{
  font-size: 12px;}

.mix_bun img{
  margin-top: 5px;
}

.itiran3 h2{margin-top: 150px;}
.itiran3 p{text-align: center;}



/* 商品詳細 */
/* ビーフ */
.syousai h1{
  margin-top: 75px;
  margin-bottom: 75px;
}
.syousai2{
  display: flex;
  justify-content: space-evenly;
  margin-left: 10%;
}


/* スライドショー */
*, *:before, *:after {
-webkit-box-sizing: border-box;
        box-sizing: border-box;
}
.cp_cssslider {
  padding-top: 520px;
  width: 300px;
  position: relative;
  margin: 2em auto;
  text-align: center;
  width: 500px;
}
.cp_cssslider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 30px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 15px 5px 0 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 40px;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FB9E24;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}


.naiyou span{font-size: 16px;}
.detail dl {
  display: flex;
  margin: 30px;
}
.detail {
  width: 50%;
}

.wetto_syousai {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 45px;
}

.wetto_syousai p{
line-height: 24px;
}
.detail dt {
  width: 20%;
}
.detail dd {
  width: 80%;
  line-height: 24px;
}

.detail h3 {
  text-align: left;
  margin-bottom: 15px;
}


/* 値段 */
.fee {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 150px;
  margin-right: 12%;
  margin-top: 50px;
}

.fee2{
  display: flex;
  align-content: flex-end;
  flex-direction: column;
  align-items: flex-end;

}
.n1{font-size: 12px;
    line-height: normal;}
.n2{font-size: 20px;
  font-weight: bold;}
.n3{font-size: 12px;
  font-weight: bold;}
.n4{font-size: 12px;}

.nedan2 {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  width: 296px;
  justify-content: flex-end;
} 

.faqc-box summary:hover {
  cursor: pointer;
}


.faqc-box summary{width: 23%;}
/* 表記 */

.nedan1 {
  margin-bottom: 20px;
  margin-left: 33%;
}
.c1 {
  color: #ffffff;
  border-radius: 10px;
  background-color: #74CCD8;
  padding: 5px;
} 

.c2 {
  color: #ffffff;
  border-radius: 10px;
  background-color: #B8BEBF;
  padding: 5px;
} 
/* セレクト */

.select_box{
  display: flex;
  width: 50%;
  margin: 0 auto;
  border-radius: 10px;
  gap: 40px;
  align-items: flex-end;
  margin-top: 50px;
}

.cp_ipselect {
overflow: hidden;
width: 200px;
margin: 1em auto;
text-align: center;
}
.cp_ipselect select {
width: 200px;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.cp_ipselect select::-ms-expand {
  display: none;
}
.cp_ipselect.cp_sl04 {
position: relative;
border-radius: 2px;
border: 2px solid #5E584E;
border-radius: 50px;
background: #ffffff;
}
.cp_ipselect.cp_sl04::before {
position: absolute;
top: 0.8em;
right: 0.8em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #5E584E;
pointer-events: none;
}
.cp_ipselect.cp_sl04 select {
padding: 10px 38px 10px 10px;
color: #5E584E;
}



/* 個数 */
.container_mt-2{
  margin-bottom: 15px;}

.input-group{
  display: flex;
  margin-top: 10px;}


/* WebKit ブラウザで、input type="number" のスピンボタンを非表示にする。 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}

/* Firefox で、input type="number" のスピンボタンを非表示にする。また、入力欄の値表示を中央寄せにし、高さをボタンのサイズに合わせる。 */
input[type="number"] {
-moz-appearance: textfield;
text-align: center;
height: 44px;
}

/*ボタンのサイズを 44 × 44 CSS ピクセルにする。*/
button.btn-number {
width: 44px;
height: 44px;
}

/* ステッパーコンポーネントの横幅を指定する。 */




/* 購入するボタン */
.nedan3 {
  gap: 20px;
  display: flex;
  font-size: 2.4rem;
  background-color: #EFBE7D;
  border-radius: 50px;
  padding: 20px 65px;
  margin-bottom: 5px;
  font-weight: bold;
}
.nedan3 h2{
  color: #5E584E;
}

  .nedan4{
      border-radius: 30px;
  background-color: #EFBE7D;}

  .n6{font-size: 12px;
      margin-top: 10px;}

/* おすすめ商品 */
.osusume{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 90px;
}
.ossm_p{line-height: 20px;}

.ossm_box2 {
  margin-top: 10px;
  text-align: center;
}
.id-box {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 80%;
}
.id {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.id br {
  display: block;
}


  

/* ミックス */
.syouhin_box{text-align: center;}
.syouhin_box2{display: flex;
            justify-content: center;
            align-items: center;
}

.syouhin_box2 img{
margin-bottom: 10px;
}

/* ミックス商品詳細 */
.id-box2 {
  display: flex;
  flex-direction: column;
  width: 80%;
}

.id2{display: flex;}


/* 商品一覧sp */

@media screen and (max-width: 1000px) {
  
  .products, .pds-detail, .pds-detail2{
      /* max-width: 350px; */
      margin: 0 auto 75px;
  }
      .pds-detail .pds-detail2{
          max-width: 350px;
          margin: 0 auto 75px;
      }
      .item{
        display: flex;
        gap: 50px;
        max-width: 350px;
        margin: 50px auto 0;
      }
      .item2{
        display: flex;
        gap: 50px;
        margin: 50px auto 0;
        max-width: 350px;
      }

      .itiran2 h2 {
        margin-top: 75px;
    }

/* ミックスsp */
  .products .syouhin_box{display: block;}

/* 商品詳細sp */
.wetto_syousai {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 45px;
  margin: 15px;
}

.wetto_syousai p{
  font-size: 1.5rem;
  text-align: left;
}
  .pds-detail {
      max-width: 350px;
      margin: 0 auto;
  }
  .syousai2 {
      display: block;
      margin-bottom: 45px;
      flex-direction: column;
      align-items: center;
      margin-left: 0;
  }
  .syousai3{
      display: flex;
      flex-direction: column;
  }

  .detail {
      width: 100%;
  }
  .detail h3 {
      text-align: left;
      margin-bottom: 20px;
      margin-top: 20px;
  }

  .detail dl {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin: 15px;
  }

  .detail dt {
      width: auto;
  }

  .id .n1_2 {
      width: auto;
  }

  
  .id-box {
      display: flex;
      flex-direction: column;
      gap: 25px;
      width: auto;
  }
  
  


  .detail dd {
      display: flex;
      width: auto;
      line-height: 24px;
      flex-direction: column;
      align-items: flex-start;
  }

  .dd p{
      font-size: 14px;

  }
  /* 詳しく見る */
  .faqc-box summary {
      font-size: 12px;
      margin-left: 8px;
  }

  /* 値段 */
  .nedan1 {
      margin-left: 38px;
  }
  .fee {
      margin: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: space-around;
  }
  .fee2{
      display: flex;
      align-items: normal;
      flex-direction: column;
  }
  


  /* クール便 */
  .nedan2 {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-left: -38px;
  }
  /* ボタン */

  .nedan3 {
      width: 80%;
      gap: 20px;
      display: flex;
      font-size: 2.4rem;
      background-color: #EFBE7D;
      border-radius: 50px;
      padding: 12px 33px;
      margin-bottom: 5px;
      font-weight: bold;
      margin: 0 38px;
  }

  .n6 {
          font-size: 10px;
          margin-top: 10px;
          text-align: center;
  }

  /* 個数 */
  .container_mt-2 {
      display: flex;
      flex-direction: column;
      margin-left: 105px;
  }

/* おすすめ商品 */
.osusume {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 30px;
  margin: 30px 15px 75px;
}

.ossm_p{
  font-size: 13px;
}

/* ミックスセット詳細 */
.cp_cssslider {
  padding-top: 310px;
  width: 300px;
  position: relative;
  text-align: center;
}

/* セレクトボタン */
.select_box {
  display: flex;
  width: 100%;
  border-radius: 10px;
  margin-top: 50px;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  align-content: center;
}
}






/* contact */
.h1 {
  margin: 75px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.h1 h1 {
  font-size: clamp(3.1rem, 2.783rem + 0.845vw, 4rem);
}
.h1 p {
  text-align: center;
  font-weight: 700;
  margin: 0!important;
}
.h1 img {
  width: 40px;
  margin-top: 15px;
}
.c-form {
  margin: 0 auto;
}
.c-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #5e584e;
  padding: 30px 0;
  gap: 15px;
}
.c-box:first-child {
  padding-top: 0;
}
.c-box:last-child {
  border-bottom: none;
  padding-bottom: 30px;
}
.c-box01 {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px  solid #5e584e;
  padding: 50px 0;
}
.c-con {
  display: flex;
  align-items: center;
  width: 350px;
}
.cn01 {
  display: flex;
  align-items: center;
  width: 375px;
  margin-top: 10px;
}
.hope {
  font-size: 2.4rem;
  margin-right: 10px;
  text-align: left;
  font-weight: normal;
}
.need {
  background-color: #a30906;
  margin-bottom: 1px;
  border-radius: 5px;
}
.need p {
  font-size: 1.4rem;
  color: #f4f4ec;
  line-height: 0;
  padding: 10px;
}
.date-select p {
  font-size: 1.3rem;
  margin: 10px 0 0 10px;
}
/* labelタグ */
.date-edit {
position: relative;
}
/* ボックス部分 */
input[type="date"] {
padding: 5px 200px 5px 10px;
text-align: center;
font-size: 1.5rem;
font-family: "M PLUS 1p", sans-serif;
font-weight: 500;
}
select {
  /* 初期化 */
  border: 1px solid #5e584e;
  color: #5e584e;
  padding: 10px 165px 10px 10px;
  position: relative;
  font-size: 1.5rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  margin: 0 0;
}
option[selected][disabled] {
  display: none;
  margin: 0 0;
}
.hs p {
  font-size: 1.3rem;
  margin: 10px 0 0 10px;
}
.nf {
  padding: 10px;
  font-size: 1.6rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  width: 350px;
  border-radius: 10px;
  border: 1px solid #5e584e;
}
.ch-box {
  color: #5e584e;
  width: 350px;
}
.ch-box td {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}
.ch-box td:last-child {
  margin-bottom: 0;
}
.ch-box input {
  width: 16px;
  height: 16px;
}
.q-box  {
  font-size: 1.6rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  resize: none;
  width: 350px;
  height: 262.5px;
  border-radius: 10px;
  padding: 10px;
}
.submit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.submit p {
  margin-top: 15px;
  line-height: 2.4rem;
}
.submit a {
  color: #a30906;
  text-decoration: underline;
}
.sm {
  padding: 15px 30px;
  font-size: 2.2rem!important;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  color: #5e584e;
  background-color: #efbe7d;
  border: 1px solid #5e584e;
  border-radius: 100px;
}
.sm:hover {
  opacity: 0.7;
  cursor: pointer;
}
.submit br {
  display: none;
}

/* faq */
.faq {
  width: 350px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.faq h2 {
  padding-bottom: 30px;
}
.faq h3 {
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: left;
  width: 80%;
}
.faq-con {
  position: relative;
}
.faqc-box01 {
  border-top: 1px solid #3a6f3b;
}
.faqc-box01:last-child {
  border-bottom: 1px solid #3a6f3b;
}
.faqc-box01 summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  color: #5e584e;
  padding: 20px 10px;
}
.faqc-box01 summary::-webkit-details-marker {
  display: none;
}
.faqc-box01 summary::after {
  transform: rotate(-45deg);
  width: 15px;
  height: 15px;
  margin-top: 10px;
  border-bottom: 3px solid #5e584e;
  border-right: 3px solid #5e584e;
  border-radius: 0.1em;
  content: '';
  transition: transform .5s;
}
.faqc-box01 summary span {
  color: #3a6f3b;
  font-size: 2.4rem;
  margin-right: 10px;
}
.details-content01 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.details-content01 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  transition: transform .5s, opacity .5s;
  padding: 0 10px 20px;
  line-height: 2.4rem;
}
.answer {
  font-size: 2.4rem;
  color: #a30906;
}
.faqc-box01[open] p {
  transform: none;
  opacity: 1;
}

/* privacy-policy */
.privacy-policy, .scta {
  max-width: 1440px;
  margin: 0 auto 10.41666%;
}
.privacy-policy h2 {
  text-align: left;
  margin-bottom: 15px;
  font-size: clamp(2.2rem, 2.13rem + 0.188vw, 2.4rem);
}
.privacy-policy p {
  line-height: 2.4rem;
  margin-bottom: 30px;
}
.p01 {
  margin-bottom: 10px!important;
}

/* scta */
.scta-t {
  border-collapse:separate;
  border-spacing:0 30px;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 50px;
  border-radius: 30px;
}
.scta-t tr {
  border-bottom: 1px solid #3a6f3b;
  display: block;
}
.scta-t tr:last-child {
  border-bottom: none;
}
.scta-t td {
  text-align: left;
  line-height: 2.4rem;
}
.t-title {
  font-size: 2rem;
  font-weight: 700;
  width: 270px;
}

/* login */
.l-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.l-form td input {
  padding: 10px;
  font-size: 1.6rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  width: 350px;
  border-radius: 10px;
  border: 1px solid #5e584e;
  color: #5e584e;
}
.l-pas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7.5px;
  margin-top: 15px;
}
.l-a {
  display: flex;
  flex-direction: column;
  gap: 7.5px;
  margin-top: 15px;
}
.l-a a {
  color: #3a6f3b;
}
.l-sm {
  font-size: 2.2rem!important;
  background-color: #efbe7d;
  padding: 9.5px!important;
}
.l-sm:hover {
  cursor: pointer;
}
.new-member {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.new-member h3 {
  color: #efbe7d;
}
.new-member a {
  font-size: 2.2rem;
  text-align: center;
  font-weight: 500;
  color: #5e584e;
  background-color: #efbe7d;
  border: 1px solid #5e584e;
  border-radius: 100px;
  padding: 15px;
  width: 350px;
  border-radius: 10px;
  margin-top: 15px;
}

/* shopping cart */
.sc-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  border-top: 1px solid #3a6f3b;
  border-bottom: 1px solid #3a6f3b;
  padding: 30px 0;
  max-width: 750px;
  margin: 50px auto 0;
}
.sc-box img {
  max-width: 350px;
}
.sc-con {
  width: 350px;
}
.sc-con h3 {
  margin-bottom: 30px;
}
.sc-cost {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.sc-cost span {
  font-size: 3rem;
  font-weight: 600;
}
.sc-sum {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 30px;
}
.sum-box, .sum-box01 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.sum-box01 {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #5e584e;
  border-radius: 10px;
  width: 265px;
}
.sum-box01 p {
  font-size: 2rem;
  font-weight: 600;
}
.sum-num {
  width: 60px;
}
.sum-num01 {
  font-size: 2.4rem!important;
  color: #fb9e24;
}
.sum-sum {
  margin-top: 15px;
  background-color: #efbe7d;
  padding: 15px;
  border: 1px solid #5e584e;
  border-radius: 10px;
  font-size: 2.4rem;
  width: 265px;
}
.sc-cost .container_mt-2 {
  margin-bottom: 0;
}
.sc-cost .input-group {
  margin-top: 0;
}

@media(max-width:1000px) {
  .submit br {
      display: block;
  }
  .privacy-policy, .scta, .shopping-cart {
      max-width: 350px;
      margin: 0 auto 75px;
  }
  .scta-t {
      padding: 0 30px;
  }
  .t-br br {
      display: none;
  }
  .scta-t tr {
      padding: 20px 0;
  }
  .scta-t tr:first-child, .scta-t tr:last-child {
      padding: 0 0 20px;
  }
  .scta-t tr:last-child {
      padding: 20px 0 0;
  }
  .scta-t td {
      display: block;
      text-align: left;
  }
  .scta-t td span {
      display: none;
  }
  .t-title {
      width: 100%;
      margin-bottom: 10px;
  }
  .sc-box {
      flex-direction: column;
  }
  .sc-cost .container_mt-2 {
    margin-left: 0;
  }
}