/* ==========================================================================
   second styles
   ========================================================================== */

.contents_cover{
    background-color:#f9f2e9;
    margin:0;
    padding-bottom:clamp(0.5rem, 2.5vw, 1.5rem);
	padding-top:1rem;
}
.header_img{
    width:100%;
    max-width: 1100px;
    margin:0 auto;
}
.header_img img{
    width:100%;
}
.header_img h2{
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight:  inherit;
    text-align: center;
    padding-bottom: 1rem;
    line-height: 1.6;
    color:#666;
    position: relative;
    margin-top:-3rem;
    margin-bottom:clamp(1.2rem, 2.5vw, 3rem);;
    margin-right: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header_img h2 > img{
    margin-top:clamp(30px, 2.5vw, -25px);
    width: 120px;
}
.header_img h2 > span{
    margin-top:clamp(30px, 2.5vw, -25px);
}

@media (max-width: 540px){
    .header_img h2{
        margin-right: 80px;
    }
    .header_img h2 > img{
    width: 80px;
}
}
    
.second_contents{
    width:96%;
    max-width: 1100px;
    background: #fff;
    margin:0 auto 1em;
    position: relative;
	padding-top:15px;
    padding-bottom:15px;
    border-radius: 25px;
}
.second_contents_inner{
	padding:0 1rem;
}

.second_contents h1{
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight:  inherit;
    text-align: left;
    line-height: 1.6;
    color:#444;
}

.second_contents h2{
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight:  inherit;
    text-align: center;
    padding-bottom: 1rem;
    line-height: 1.6;
    color:#666;
    margin: 3rem 0;
}

.pan{
    padding:5px 15px;
    font-size:0.8rem;
    z-index:100;
    background-color:#f5eadb;
}

.second-header{
    width:100%;
    margin-top:20px;
}
.second-header img{
    width:100%;   
}

.second_inner{
    width:98%;
    margin:0 auto;
}

.header-img-sp h1{
    width:95%;
    text-align: left;
    margin:0 auto;
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    padding-bottom: 0rem;
    line-height: 1.5;
    color:#444;
    margin-bottom: 0rem;
}
.header-img-sp h1 span{
    display: inline-block;
}
.header-img-sp p{
    width:95%;
    text-align: left;
    margin:0 auto;
}

.interpet-contents-cover{
    background-image:url(../img/information/bg_interpet.png);
    background-repeat: repeat;
    position: relative;
}
.interpet-contents{
    width:86%;
    max-width:1000px;
    margin:0 auto;
    background-color:#fdfaf6;
    padding:0 0.5em;
}
.interpet-subtitle{
    position: absolute;
    top:-150px;
    left: 50%;
    transform: translateX(-50%);
    width:100%;
    max-width:1130px;
}
.interpet-subtitle img{
    width:100%;
}

.interpet-detail{
    padding-top:80px;
}
.kaiki{
    text-align: center;
}



.interpet-detail img.pc-only{
    display: inline;
}
.time-place{
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-left:40px;
}
.time-place span{
    display: inline-block;
}

.btn_interpet-site a{
    background-color:#666;
    border:#666 thin solid;
    width:80%;
    max-width:360px;
    margin:40px auto;
}

.interpet-info{
    padding:40px 0;
}
.interpet-map{
    width:100%;
    max-width:840px;
    margin:0 auto;
}
.interpet-map img{
    width:100%;
}

.img-about-midashi{
    display: flex;
    align-items: center;
    padding-left:1rem
}
.img-about-midashi .logo{
    width:20rem;
}

.interpet-info .btn_base a{
    background-color: #eb6363;
    width:360px;
    height: 50px;
    border-radius: 25px;
    padding:10px;
    text-align: center;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:2rem;
}

.interpet-info .btn_base a > img{
    width:10em;
}
.interpet-info .btn_base a:hover{
    background-color: #f29600;
}

.present{
    padding-top:40px;
}
.present > div{
    margin:2px;
}
.omachi{
    margin-top:-30px
}
.omachi img{
    width:100%;
    max-width:540px;
}

@media (max-width: 820px){
    .interpet-subtitle{
    position: absolute;
    top:-80px;
    left: 50%;
    transform: translateX(-50%);
    width:100%;
    max-width:1130px;
}
    .img-about-midashi{
    display: inherit;
}
    .img-about-photo img{
        width:100%;
    }
    
    .kaiki img{
    width:100%;
}
}

@media (max-width: 540px){
    .interpet-contents-cover{
        margin-top:75px;
    }
    .interpet-subtitle{
    top:-70px;
}
    .interpet-detail{
    padding-top:40px;
}
    .interpet-detail img.pc-only{
    display: none;
}
    .interpet-detail img.sp-only{
    display: inline;
    width:100%;
}
    .time-place{
    margin-left:0px;
}
    .interpet-info .btn_base a{
    width:100%;
}
    .interpet-info .btn_base a > img{
    width:8em;
}
    .present > div{
    width:100%;
}
    .present > div img{
    width:100%;
}
    .omachi{
    margin-top:-10px
}
}




/*privacy*/
.pp-list{
    margin-left: 2rem;
    margin-bottom:2rem;
}
.pp-list li{
    list-style:disc;
    margin-left: 1rem;
}
p.zero-margin{
    margin-top:0px;
    margin-bottom:0px;
}

/*company*/
table{
    width: 95%;
    margin:0 auto;
    background: #ddd;
    border-spacing: 1px;
}
table th,td{
    background:#fff;
    text-align: left;
    padding:1rem;
}

/*フード一覧　list_petfood*/
.food_sagasu{
    position: relative;
    padding-bottom:3rem;
    margin-bottom:3rem;
}
.listfood h2 img{
    width:100%;
    max-width:560px;
}

.food_sagasu_category{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.food_sagasu_category > div{
    width:25%;
    max-width:194px;
    margin:0.2rem;
}
.food_sagasu_category > div img{
    width:100%;
}

/* 矢印のアニメ */
.scrolldown{
  position:absolute;
  bottom:1%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }
.scrolldown span{
  position: absolute;
  left:-20px;
  bottom:10px;
  color: #807970;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #807970;
    transform: skewX(-31deg);
}
.scrolldown:after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width:1px;
  height: 50px;
  background:#807970;
}

.listfood-contents{
    width:98%;
    max-width:800px;
    margin:3rem auto;
    padding:5rem 3rem 3rem;
    border-radius: 25px;
}
.mix, .s-size{
    background:linear-gradient(180deg, rgba(224, 182, 130, 1) 6%, rgba(255, 255, 255, 1) 6%);
}
.xs-size, .m-size{
    background:linear-gradient(180deg, rgba(235, 99, 99, 1) 6%, rgba(255, 255, 255, 1) 6%);
}

.listfood-contents ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.listfood-contents ul li{
    width:22%;
    margin:0.5rem;
}
.listfood-contents ul li img{
    width:100%;
}
.listfood-lead > div.lead-text{
    width:45%;
}
.listfood-lead > div.package{
    width:55%;
    margin-top:-4rem;
}
.listfood-lead > div.package img{
    width:100%;
    max-height:344px;
}

.listfood-care_banner{
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 1px 1px 3px #666;
    padding:1rem 0.5rem;
    display: flex;
    align-items: center;
    width:98%;
    max-width:650px;
    margin:0 auto;
    margin-bottom:3rem;
}
.listfood-care_banner > div.bn_img{
    width:20%;
    display: flex;
    align-items: center;
}
.listfood-care_banner > div.bn_img img{
    width:100%;
}
.catch-cover{
    padding-left:2rem;
}
.care-catch-lead{
    line-height: 1.2;
}
.care-catch-lead span{
    display: inline-block;
}

.care-catch{
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: bold;
}
.care-catch span{
    display: inline-block;
}
.listfood-care_banner:hover{
    transform: translateY(2px);
    cursor: pointer;
}

@media (max-width: 540px){
    .food_sagasu_category > div{
    width:45%;
    margin:0.2rem;
}
    .listfood-contents{
    margin:3rem auto;
    padding:2rem 0.5rem 1rem;
}
    .listfood-lead > div.lead-text{
    width:100%;
}
.listfood-lead > div.package{
    width:100%;
    margin-top:0rem;
}
    .listfood-contents ul li{
    width:33%;
    margin:0.5rem;
}
    .listfood-care_banner > div.bn_img{
    width:35%;
}
}

/*フード詳細　detail_petfood*/
.food_detail_cover{
    background-color: #f9f2e9;
    margin:0;
    padding: inherit;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width:100%;
}
.food_detail{
    width:100vw;
    max-width: 1100px;
    position: relative;
    margin:0 auto;
    padding:3rem;
    background-color: #fff;
    border-radius: 25px;
    padding-bottom:40px;
    width:98%;
}
.food_contents_cover{
    display:flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.food_contents{
    position: relative;
    padding:3rem;
}

.food_detail h2{
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight:  inherit;
    text-align: left;
    padding: 1rem;
    line-height: 1.6;
    color:#666;
    border-bottom:#f6eadb 2px solid;
}

.cart_area_cover_pc{
    width:25%;
}
.cart_area{
    padding:3rem 0;
    position:sticky;
    top:0;
    background-color:#fff;
}
.cart_area_contents{
    min-height:1000px;
}

.cart_btn_order button{
    background-color:#eb6363;
    border-radius: 10px;
    border:thin solid #eb6363;
    padding:0.5rem;
    text-align: center;
    width:100%;
    color:#fff;
    margin:0.5rem 0;
} 
.cart_btn_order button:hover{
    background-color:#fff;
    border:thin solid #eb6363;
    color:#eb6363;
}
.cart_btn_modoru button{
    background-color:#fff;
    border-radius: 10px;
    border:thin solid #f29600;
    padding:0.5rem;
    text-align: center;
    width:100%;
    color:#f29600;
    margin:0.5rem 0;
} 
.cart_btn_modoru button:hover{
    background-color:#f29600;
    border:thin solid #f29600;
    color:#fff;
}

.food_setsumei{
    display: flex;
    justify-content: flex-start;
    flex:1;
}
.foodimg_area{
    text-align: center;
}
.foodimg_area img{
    width:100%;
    max-width:350px;
}
.foodtext_area{
    padding:1rem;
}
.food_detail hr{
    margin:1rem 0;
}
.price{
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    padding:1rem 0;
}
.priceoff{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}
.special{
    color: red;
}
.price span{
    font-size:1rem;
    padding:0.5rem;
}

/* 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{
    background-color:#fff;
    color:#333;
    font-size: 1.3rem;
}
button.size-border {
  width: 44px;
  height: 44px;
  border:thin #666 solid;
}
input.input-size-border{
    width:88px;
  border-top:thin #666 solid;
  border-bottom:thin #666 solid;
}

/* ステッパーコンポーネントの横幅を指定する。 */
div.input-group {
  width: 176px;
  display: flex;
    justify-content: center;
}
select{
    width:176px;
    border:thin #666 solid;
    padding:0.5rem;
    -moz-appearance: menulist;
  -webkit-appearance: menulist;
}
.cycle-set{
    padding-top:0.5rem;
}
.cycle-set label{
    padding-left:0.5rem;
    padding-right:1rem;
}
.cycle-set-free{
    padding-bottom:0.5rem;
    padding-left:0.5rem;
}
.cycle-set-free > input[type="number"]{
    display: inline-block;
    width:100px;
    border:#666 thin solid;
}
.cycle-set-teiban{
    padding-left:0.5rem;
}
.cycle-set-teiban span{
    display: inline-block;
}
.text-small{
    font-size: 0.9rem;
    display: block;
}

.food_setsumei h4{
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin-top:1rem;
}
.icon_dog img{
    width:50%;
    max-width:200px;
}
.icon_dog img[src*="6311"]{
    display: none;
}

.food_point{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.point01{
    background-color:#f6eadb;
    border-radius: 25px;
    padding:1rem;
    margin:0.3rem auto;
    width:30%;
    text-align: center;
    font-weight: bold;
    color:#66615a
}
.muni_ico{
    background-color:#e3edf2;
    color:#568BAE;
    border-radius: 25px;
    padding:1rem;
    margin:0.3rem auto;
    width:30%;
    text-align: center;
    font-weight: bold;
}
.food_setsumei_eiyou h4{
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin:1rem 0;
    color:#f29600;
}

.food_setsumei_eiyou li{
    list-style-type:disc;
    margin:1rem;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: clamp(150%, 2vw, 180%)
}

.food_setsumei_eiyou h6{
    font-size: clamp(1rem, 3vw, 1.1rem);
    margin:1rem 0;
    font-weight: inherit;
}
.advanced .point01{
    border-radius: 25px;
    padding:1rem;
    margin:0.3rem auto;
    width:48%;
    text-align: center;
    font-weight: bold;
    color:#fff
}
.advanced .muni_ico{
    border-radius: 25px;
    padding:1rem;
    margin:0.3rem auto;
    width:48%;
    text-align: center;
    font-weight: bold;
}
.food_setsumei_eiyou h4.ad-purple{
    color:#662d91;
}
.food_setsumei_eiyou h4.ad-orange{
    color:#d85d09;
}
.food_setsumei_eiyou h4.ad-pink{
    color:#e56193;
}
.food_setsumei_eiyou h4.ad-green{
    color:#009245;
}
.food_setsumei_eiyou h4.ad-gold{
    color:#af9c0e;
}
.food_setsumei_eiyou h4.ad-darkpink{
    color:#e88d80;
}

.table-wrap {
  overflow-x: scroll;
	width:100%;
	max-width:773px;
}
.eiyou_table{
    white-space: nowrap;
}

.purple{
    color:#662d91;
}
.orange{
    color:#d85d09;
}
.pink{
    color:#e56193;
}
.green{
    color:#009245;
}
.gold{
    color:#af9c0e;
}
.darkpink{
    color:#e88d80;
}

.bg_purple{
    background-color:#662d91;
}
.bg_orange{
    background-color:#d85d09;
}
.bg_pink{
    background-color:#e56193;
}
.bg_green{
    background-color:#009245;
}
.bg_gold{
    background-color:#af9c0e;
}
.bg_darkpink{
    background-color:#e88d80;
	color:#fff;
}

@media (max-width: 820px){
    .food_detail{
        width: 98%;
        margin:0 auto;
        max-width:inherit;
        padding:0.5rem;
    }
    .food_contents{
    padding:1rem;
    margin:0 auto;
        width:70%;
}
    .food_setsumei{
        display: inherit;
        flex-grow: 2;
    }
    cart_area_cover_pc{
        flex-grow: 1;
    }
    div.input-group {
    width: 100%;
    display: flex;
    justify-content: center;
}
}
    
@media (max-width: 540px){
    .food_contents_cover{
        display: inherit;
    }
    .food_contents {
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
}
    .cart_area_cover_pc{
        display: none;
    }
    .cart_area {
    padding: 1rem 0;
    position: inherit;
    top: inherit;
    background-color: #fff;
}
    .cart_area_contents {
    display:none;
}
   
    .food_setsumei {
    display: inherit;
}
	.food_point{
    display: inherit;
}
    .point01{
    width:90%;
}
    .advanced .muni_ico{
    width:90%;
}
    .advanced .point01{
    width:90%;
}
    
    }


/*ショッピングカート*/

.shopping_cart_contents_cover{
    display: flex;
    justify-content: space-between;
    padding:1.5rem;
}
.shopping_cart_meisai{
    background-color: #fff;
    padding:0rem;
    border-radius: 25px;
    padding-bottom:40px;
    width:70%;
}
.shopping_cart_contents{
    display: flex;
    justify-content: space-between;
    padding:1rem 0;
    border-bottom:#f6eadb 2px dotted;
}
.shopping_cart_contents_flex{
    display: flex;
    flex-grow:2
}

.shopping_cart_contents_flex_suuchi{
    display: flex;
    justify-content: flex-end;
    flex-grow:1
}
.cart_contents_img{
    width:100px;
    padding:0 10px;
    text-align: center;
}
.cart_contents_img img{
    width:100px;
}
.cart_contents_foodinfo{
	margin-left:1rem;
}
.foodname{
    font-size:clamp(1rem, 3vw, 1rem);
    font-weight: bold;
}
.foodprice{
    font-size:clamp(0.8rem, 3vw, 0.9rem);
    line-height: 1.4;
}
.kounyu-keitai span.normal{
    background-color:#00AFEF;
    color:#fff;
    padding:0.2rem 0.5rem;
}
.kounyu-keitai span.subscription{
    background-color:#CE3388;
    color:#fff;
    padding:0.2rem 0.5rem;
}
.cart_contents_saikeisan_area{
    width:180px;
    margin-left:1rem;
}
.cart_btn_saikeisan{
    margin:0 auto;
}
.cart_btn_saikeisan button{
    background-color:#f29600;
    border-radius: 10px;
    border:thin solid #f29600;
    padding:0.2rem 0;
    text-align: center;
    color:#fff;
    margin:0.5rem 0;
    width:176px;
}
.cart_btn_saikeisan button:hover{
    background-color:#fff;
    border:thin solid #f29600;
    color:#f29600;
}
.cart_contents_price{
    width:100px;
    text-align: right;
    font-size: clamp(0.9rem, 3vw, 0.9rem);
    flex:1;
}
@media (max-width: 540px){
    .cart_contents_img{
    width:150px;
    padding:0 10px;
    text-align: center;
        margin:0 auto;
}
    .cart_contents_img img{
    width:150px;
}
    .shopping_cart_contents_flex{
    display: inherit;
}
    .cart_contents_saikeisan_area{
}
}

.shopping_cart_goukei{
    text-align: right;
    padding:0rem 1.5rem;
    background-color:#fff;
    border-radius: 25px;
    width:28%;
}
.shopping_cart_goukei h6{
    font-size: clamp(1rem, 3vw, 1.1rem);
    margin:1rem 0;
    font-weight: inherit;
    text-align: left;
    border-bottom:#f29600 thin solid;
}
.cart_contents_price_goukei{
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    font-weight: bold;
    text-align: right;
    padding-bottom:1rem;
}
.cart_contents_price_goukei span{
    font-size: clamp(1rem, 3vw, 1.1rem);
    font-weight: lighter;
}

.cart_contents_kosuuhyouji{
    padding:0 0.5rem;
    width:8rem;
    flex:1
}
.cart_contents_kosuuhyouji > div{
    margin-right:1rem
}
.confirm{
    width: 100%;
}
.cart_contents_price_sougoukei{
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    padding:1rem 0 0 0;
    font-weight: bold;
    border-top:double 4px #f29600;
    display: flex;
    justify-content: flex-end;
}
.midashi_sougoukei{
    margin-right:2rem;
}
.shohizei{
    font-size:1rem;
    font-weight: bold;
    padding-bottom: 0.5rem;
}

.shopping_cart_payment{
    padding:0rem 1.5rem;
    background-color:#fff;
    border-radius: 25px;
}
.shopping_cart_payment h6{
    font-size: clamp(1rem, 3vw, 1.1rem);
    margin:1rem 0;
    font-weight: inherit;
    text-align: left;
    border-bottom:#f29600 thin solid;
}
.shopping_cart_payment .midashi{
    font-size: clamp(0.9rem, 3vw, 1rem);
    font-weight: bold;
    margin-left:-1rem;
}
.shopping_cart_payment_info_text{
    padding:1rem;
}
.shopping_cart_payment_info_text > div{
    padding-left:1rem;
}
.shopping_cart_payment_info{
    padding:1rem;
}
.shopping_cart_payment_info > div span{
    white-space: nowrap;
}
.shopping_cart_payment_info > div{
    padding-left:1rem;
}

.shopping_member_info{
    padding:1rem;
}
.shopping_member_info ul li > div{
    
}

.shopping_customer_info{
    padding:1rem;
}
.shopping_customer_info h3{
    padding:1rem 0;
}
.shopping_customer_info label.card_info{
    display: inline;
}
.shopping_customer_info ul{
    margin:0.5rem 0 0.5rem 1rem;
}
.shopping_customer_info ul li{
    padding:0;
	margin-bottom: 0.5rem;
}

.shopping_point_quantity{
    padding-left: 1.5rem;
}
.shopping_point_quantity > div{
    display: flex;
    align-items: center;
    font-weight: lighter
}
.shopping_customer_info_input select.date_select{
    width:100px;
}

.food_link_container{
    width:85%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}
.food_link_container > div{
    width:25%;
    margin:0.5rem;
}
.food_link_container > div a:hover{
    cursor: pointer
    }
.food_link_container > div img{
    width:100%;
}
@media (max-width: 820px){
    .foodname{
    width:;
    padding-right:1rem;
}
    
}
@media (max-width: 540px){
    .shopping_cart_contents_cover{
    display: inherit;
        padding:0.5rem;
}
    .shopping_cart_contents{
    display: inherit;
    padding:1rem 0;
}
    
    .shopping_cart_meisai{
    width:98%;
    margin:2px auto;
    padding:0rem;
}
    .cart_btn_saikeisan{
    width:12rem;
}
    .shopping_cart_goukei{
    width:98%;
    margin:2px auto;
    padding:1rem 2rem;
}
    .cart_contents_foodinfo{
    flex-grow: inherit;
}
    .cart_contents_price{
    flex-grow: inherit;
}
    .shopping_cart_payment{
    padding:0rem 0.5rem;
}
    .shopping_cart_payment_info{
    padding:0rem 0.5rem;
}
    
    .shopping_customer_info_input input.w25{
        width:48%;
    }
    .shopping_customer_info_input input.w50{
        width:100%;
    }
    .foodname{
    padding-right:0;
    }
    .food_link_container{
    width:98%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
    .food_link_container > div{
    width:46%;
    margin:0.2rem;
}

}


/*--------------------------------------------
/*mypage
-----------------------------------------------*/
.second_contents .mypage{
    padding:clamp(1rem, 2.5vw, 1.5rem) 0;
}
.second_contents .mypage h2{
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight:  inherit;
    text-align: center;
    line-height: 1.6;
    color:#807970;
    margin: 3rem 0;
    border-bottom: #f6eadb 1px solid;
}
.second_contents .mypage h2 .select_plan{
	font-size: clamp(1rem, 2.5vw, 1.1rem);
}
.second_contents .mypage h2 span{
    display: block;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}
.second_contents .mypage h3{
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight:  inherit;
    text-align: left;
    line-height: 1.6;
    color:#807970;
    margin:clamp(1rem, 2.5vw, 1.3rem);
}
.second_contents .mypage hr{
    border-bottom: #f6eadb 1px solid;
    margin:3rem auto;
}
.mypage-infobox{
    width:80%;
    margin:0 auto;
    background-color:antiquewhite;
    border-radius: 10px;
    display: flex;
    flex:1
}
.mypage-infobox ul{
    width:50%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
.mypage-infobox ul li{
    padding:1rem;
    display: flex;
    align-items: center;
    width:100%;
    font-size:clamp(0.8rem, 2.5vw, 1rem);
}
.mypage-infobox ul li span{
    display: block;
}
.mypage-infobox ul li span.number{
    font-size:clamp(1rem, 2.5vw, 1.1rem);
    font-weight: bold;
    color:#f29600;
}

/*mypage-petcard*/
.mypage-petcard-cover{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:1rem auto;
}
.petcard{
    width:30%;
    background-color:#fff;
    filter:drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:5px;
}
.petcard-img{
    width:100%;
    aspect-ratio: 5 / 3;
}
.petcard-img img{
    width: 100%;
    object-fit: cover;
}
.petcard-info p{
    display: inline-block;
    margin:0.5rem 0;
}
.petcard-info p span{
    margin-right:2rem
}
.petcard-info p span.petcard-name{
    font-size:clamp(1rem, 2.5vw, 1.1rem);
    font-weight: bold;
}
.petcard-btn .btn_base{
    margin:5px auto;
    max-width:300px;
}


.add_mypet{
    margin:5px auto;
    max-width:300px;
}


/*mypage blockmenu*/
.mypage-menu{
	width:600px;	/*2＊４のアイコンの場合、width:600px;*/
    margin:1rem auto;
    padding:1rem 1rem 0.5rem;
}
.mypage-menu ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin:0;
}
.mypage-menu ul li a img:hover{
    transform: translateY(4px);
    filter: sepia(60%);
}

.mypage_community{
    width:100%;
    max-width: 1100px;
    background:;
    margin:1rem auto;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding:clamp(1rem, 2.5vw, 1.5rem);
}
.mypage_community > div{
    width:48%;
    margin:0.2rem;
    text-align: center;
}

.hikidashi-drawer input{
    
}
/* スマホ用メニュー引き出し部*/
@media (max-width: 540px){
.hikidashi-drawer{
    display: block;
    position: fixed;
    bottom:0px;
    left:0px;
    z-index: 10100;
}

.hikidashi-drawer-hidden{
  display: none;
}

.hikidashi-drawer-open {
  display: flex;
  height: 60px;
  width: 120px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  left:0;
  bottom:0;
  z-index: 10001;
  background-color: #f6eadb; 
    border-radius:15px 15px 0 0;
}
.hikidashi-drawer-open:hover {
  background: #f9f2e9;
  transition: 0.5s;
}

/* ハンバーガーメニューのアイコン */
.hikidashi-drawer-open span{
  display: block;
  color:#807970;
}

  
/* メニューのデザイン*/

.hikidashi-drawer-content {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: -205px;/* メニューを画面の外に飛ばす */
  z-index: 1001;
  transition: 0.5s;
}

/* アイコンがクリックされたらメニューを表示 */
#hikidashi-drawer-check:checked ~ .hikidashi-drawer-content {
  bottom: 0;/* メニューを画面に入れる */
}

}


@media (max-width: 820px){
    .mypage-infobox{
    width:98%;
    margin:0 auto;
    display: inherit;
    padding:0.5rem;
}
    .mypage-infobox ul{
    width:100%;
    display: inline-block;
    
}

    .mypage-infobox ul li{
    padding:0.2rem 1rem;
    display: flex;
    align-items: center;
    width:100%;
}

    .mypage-infobox ul li span{
    display: block;
}
    .mypage-infobox ul li >div span{
    display: inline;
        margin:0 0.2rem;
}
    .mypage_community > div{
    width:48%;
    margin:0.2rem;
    text-align: center;
}
    .mypage_community > div img{
        width:100%
    }

}
@media (max-width: 540px){
    .mypage-infobox ul li >div span{
    display: inherit;
        margin:0 0.2rem;
}
    .petcard{
    width:90%;
}
    .mypage_community{
    display: inherit;
}
    .mypage_community > div{
    width:90%;
    margin:0.2rem auto;
}
    
/*mypage blockmenu*/
	.mypage-menu ul{
    justify-content: flex-start;
}
    .mypage-menu{
    width:100%;
    background-color:#f6eadb;
}
    .mypage-menu li{
    width:25%;
}
    .mypage-menu li img{
    width:100%;
}
    
}

/*うちの子情報の詳細*/
.mypage-petcard-detail{
    width:90%;
    background-color:#fff;
    filter:drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:1rem auto;
}
.petcard-detail-container{
    display: flex;
    border-bottom: #f6eadb 1px solid;
    margin-bottom:1rem;
    padding-bottom: 1rem;
}
.petcard-detailimg{
    width:33%;
    padding:clamp(1rem, 2.5vw, 1.2rem);
    flex-grow: 1;
}
.petcard-detailinfo{
    width:60%;
    flex-grow: 2;
    padding:clamp(0rem, 2.5vw, 1.2rem);
}
.petcard-detailinfo ul li{
    display:flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding:0.3rem 0.5rem;
    border-bottom: #807970 1px dashed;
}
.detailinfo_koumoku{
    min-width:150px;
    display: inline-block;
    margin-right:1rem;
}

.petcard-detailinfo ul li span{
    white-space: nowrap;
}
.petcard-detailinfo ul li.birthday select{
    padding:0.3rem 0;
    width:18%;
}
.petcard-detailinfo ul li.food_syukan span{
    display: block;
}
.petcard-btn .btn_base{
    margin:5px;
    width:100%;
    max-width:300px;
}

.petcard-detailinfo ul li label{
    display: block;
    width:30%;
    min-width:80px;
}
.petcard-detailinfo ul li label.inline-label{
    display: inline-block;
    min-width:inherit;
    width: auto;
}
.petcard-detailinfo ul li input, select, textarea{
    border:thin #807970 solid;
    padding:0 0.2rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
}
select{
    padding:0.5rem;
    background-color: #fff;
}
.petcard-btn{
    display: flex;
    justify-content: center;
    position:relative;
}

.muni-icon{
    position: absolute;
    right:10px;
    bottom:-10px;
    width:75px;
    height:75px;
}
.muni-icon img{
    width:100%;
}
.petcard-btn button{
    margin:1rem 0.2rem;
}

@media (max-width: 540px){
    
    .petcard-detail-container{
    display: inherit;
    margin-bottom:1rem;
    padding-bottom: 1rem;
}
    .petcard-detailimg{
    width:100%;
}
    .petcard-detailinfo{
    width:100%;
}
    .petcard-detailinfo ul li label{
    display: block;
    width:100%;
    min-width:inherit;
}
    .petcard-detailinfo ul li.birthday select{
    padding:0.3rem 0;
    width:25%;
}
    .detailinfo_koumoku{
    min-width:80px;
}
    .petcard-btn{
    display: inherit;
}
    .petcard-btn button{
        margin:1rem auto;
    }
    
    .muni-icon{
    position: relative;
    right:inherit;
    bottom:inherit;
    margin:1rem auto;
    text-align: center
}

}

/*注文履歴*/
.mypage-ordercard{
    width:90%;
    background-color:#fff;
    filter:drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:1rem auto;
}
.ordercard-container{
    display: flex;
    justify-content: space-between;
    flex: 1;
    margin-bottom:1rem;
    padding-bottom: 1rem;
}

.mypage-ordercard h4{
    display:flex;
    justify-content: space-between;
    background-color:#f6eadb;
    width:100%;
    padding:0.5rem 1rem;
}
.mypage-ordercard h4 span{
    display: block;
    margin-right:1rem
}
.mypage-ordercard h5{
    font-size:clamp(1rem, 2.5vw, 1.2rem);
    padding:0.5rem 0 0.5rem 1rem;
    width:100%;
    font-weight: lighter;
	display:flex;
	justify-content:space-between;
}
.ordercard-item{
    flex-grow: 3;
}
.ordercard-iteminfo{
    display: flex;
    border-bottom:thin #f6eadb solid;
    padding:1rem;
}
.ordercard_item_img{
    text-align: center;
}
.ordercard_item_img img{
    width:80px;
}
.ordercard_item_text{
    margin:0 1rem;
    
}
.ordercard_item_text > div > div{
    margin:2px;
    font-size:clamp(0.8rem, 2.5vw, 1rem);
}
.ordercard-btn{
    flex-grow: 1;
}

@media (max-width: 540px){
    .mypage-ordercard h4{
        display:inherit;
    }
	.mypage-ordercard h5{
        display:inherit;
    }
	.mypage-ordercard h5 form{
		float:right;
		margin-bottom:0.5rem;
	}
	.mypage-ordercard h5 form::after{
		content:"";
		clear:both;
	}
    .ordercard-container{
        display:inherit;
    }
    .ordercard-iteminfo{
        display:inherit;
    }
    .ordercard_item_text > div{
        text-align: center;
        margin:0 auto;
    }
    .ordercard_item_text{
    margin:0 0rem;
    }
}

/*定期便設定*/
.teiki-riyou-btn{
    display: flex;
    justify-content: center;
}
.teiki-riyou-btn a.active{
    background-color:#f29600;
    color:#fff;
}
.teiki-riyou-btn > div{
    margin:0 3px;
}
.order-teiki-container{
    display: flex;
    justify-content: space-between;
    margin-bottom:1rem;
    padding-bottom: 1rem;
}
.order-teiki-iteminfo{
    display: flex;
    padding:1rem;
}
.ordercard_teiki_item_img{
    text-align: center;
}
.ordercard_teiki_item_img img{
    width:160px;
}
.order-teiki-list ul li ul{
    display: flex;
    align-items: center;
}
.order-teiki-list ul{
    list-style: none;
}
.order-teiki-list ul li.list-period{
    margin:0.25rem 0;
    padding:0.25rem 0;
    border-bottom:dashed #999 thin;
}
.order-teiki-list ul li.list-period:first-child{
    border-top:dashed #999 thin;
}
.order-teiki-list ul li ul li{
    margin:0 0.5rem;
}
.order-teiki-list ul li ul li.list-date{
    font-size:clamp(1rem, 2.5vw, 1rem);
    text-align: left;
    color:#807970;
}
.order-teiki-list ul li ul li.list-button{
    display: flex;
}
.order-teiki-list ul li ul li button{
    font-size:clamp(0.8rem, 2.5vw, 0.9rem);
    margin:0 0.2rem;
}

@media (max-width: 540px){
    .order-teiki-container{
    display: inherit;
    }
    .order-teiki-iteminfo{
        display: inherit;
        padding:0rem;
    }
    .order-teiki-list ul li ul{
    display:inherit;
    }
    .order-teiki-list li{
    margin:0rem;
    }
    .order-teiki-list ul li ul li{
    margin:0 0rem;
    }
    .order-teiki-list ul li ul li.list-button{
        display: flex;
        justify-content: center;
    }
}

/*ポイント・クーポン*/
.mypage-point-coupon-card{
    width:90%;
    background-color:#fff;
    filter:drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:1rem auto;
}
.point-coupon-container{
    margin-bottom:1rem;
    padding-bottom: 1rem;
    position:relative;
}
.point-coupon-container h4{
    display:flex;
    justify-content: space-between;
    background-color:#f6eadb;
    width:100%;
    padding:1rem;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    color:#f29600;
}
.point-coupon-info{
    width:80%;
    margin:1rem auto;
}
.point-coupon-kikangentei{
    display:flex;
    justify-content: space-between;
    border-bottom:4px #f6eadb double;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    line-height: 2;
}
.uchiwake{
    border-bottom:thin #f6eadb dashed;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    margin-left:2rem;
}

@media (max-width: 540px){
    .mypage-point-coupon-card{
    width:96%;
    }
    .point-coupon-info{
        width:90%;
    }
}

.coupon-item{
    display:flex;
    justify-content: flex-start;
    border-bottom:thin #807970 dashed;
    padding:0.5rem;
}
.coupon-item-img{
    padding:0 2rem 0 0;
}
.coupon-item-img img{
    width:100%;
    max-width:140px;
}
.search_box_cover{
    width:80%;
    max-width:575px;
    margin:0 auto;
}
.search_box{
    display: flex;
}
.search_box input{
    flex-grow:2;
    border:thin #807970 solid;
    padding:0.5rem;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
}

/*メール設定（配信メールのon/off）*/

.mail-maga-card{
    width:90%;
    background-color:#fff;
    filter:drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:1rem auto;
}
.mail-maga-container{
    margin-bottom:1rem;
    padding-bottom: 1rem;
    position:relative;
}
.mail-maga-item{
    display:flex;
    justify-content: flex-start;
    border-bottom:thin #807970 dashed;
    padding:0.5rem;
}
.mail-maga-img{
    padding:0 2rem 0 0;
}
.mail-maga-img img{
    width:100%;
    max-width:140px;
}
.mail-magazine-radio{
    padding:1rem;
    background-color:#f9f2e9;
}
.mail-maga-info > div{
    display: flex;
}
.mail-magazine-radio > div{
    padding-right:0.5rem;
}

@media (max-width: 540px){
    .mail-maga-info > div{
        display: block;
    }
    .mail-maga-img{
    padding:0 0.5rem 0 0;
    width:100%;
}
    .mail-maga-img img{
    width:100%;
    max-width:140px;
}
}



/*-----------------------
        フォーム関連
-------------------------*/
.second_contents .mypage .mypage-form h3{
    text-align: center;
}
.mypage-form ul.login{
    width:100%;
    max-width:450px;
    margin:1rem auto;
}
.mypage-form ul.member{
    width:100%;
    max-width:500px;
    margin:1rem auto;
}
.mypage-form li{
    line-height: 2;
    padding:0.5rem;
}
.mypage-form li:last-child{
}
.mypage-form label{
    display: block;
    font-weight: bold;
}
.mypage-form label.inline-label{
    display: inline;
    font-weight: lighter;
}
.mypage-form input{
    border:thin #807970 solid;
    padding:0 0.2rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
}
.mypage-form select{
    border:thin #807970 solid;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
    padding:0.5rem;
}
.mypage-form textarea{
    border:thin #807970 solid;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
}
.mypage-form input[type="number"]{
    text-align: left;
    height:auto;
}
.mypage-form .ss-card{
    border:thin #807970 solid;
    padding:0.3rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
    width:14rem;
}
.mypage-form .ss-card.small{
    border:thin #807970 solid;
    padding:0.3rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    border-radius: 5px;
    width:7rem;
}
.toi_koumoku{
    margin-left:1rem
}
.form_confirm{
    background-color:#f9f2e9;
    padding:0.3rem;
}
.send_button{
    display: flex;
    justify-content: center;
    margin:0 auto;
}

button.inline-button{
    display: inline;
    padding:0.3rem;
    background-color:#fff;
    color:#eb6363;
	margin:0;
}
button.active{
    background-color:#eb6363;
    color:#fff;
}
.page-tab form{
    text-align: center;
    width:90%;
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex:1
}
.page-tab form button{
    flex:1;
    margin:1px;
}
.w100{
    width: 100%
}
.w80{
    width: 80%
}
.w50{
    width: 49%
}
.w33{
    width: 32%
}
.w25{
    width: 24%
}
.w12{
    width: 11%
}

@media (max-width: 540px){
    .w80{
        width: 100%}
    .w33{
    width: 48%
}
.w25{
    width: 48%
}
.w12{
    width: 48%
}
}

/*よくある質問　*/
.faq_detail_cover{
    background-color: #f9f2e9;
    margin:0;
    padding: inherit;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width:100%;
}
.faq_detail{
    width:100vw;
    max-width: 1100px;
    position: relative;
    margin:0 auto;
    padding:3rem;
    background-color: #fff;
    border-radius: 25px;
    padding-bottom:40px;
    width:98%;
}
.faq_contents_cover{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
}
.faq_contents{
    position: relative;
    padding-top: 3rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 3rem;
    width: 70%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.faq_answer {
    width: 90%;
    background-color: #fff;
    filter: drop-shadow(1px 1px 2px #807970);
    border-radius: 15px;
    padding: clamp(1rem, 2.5vw, 1.4rem);
    margin: 1rem auto;
}
.faq_detail h2{
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight:  inherit;
    text-align: left;
    padding: 1rem;
    line-height: 1.6;
    color:#666;
    border-bottom:#f6eadb 2px solid;
}
.faq_contents h3{
    font-size: clamp(1.4rem, 2.8vw, 1.7rem);
    margin-top: 3rem;
    /*border-bottom: 2px dotted #f29600;*/
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    color:#f29600;
}
.faq_contents h3:first-child{
    margin-top: 1rem;
 
}
.faq_answer h3 {
   background-color: #f6eadb;
    width: 100%;
    padding: 1rem;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
      text-align: center;
    border-bottom: 0px;
        color: #252525;
}

.faqlist_area_cover{
    width:25%;
}
.faqlist_area{
    padding:3rem 0;
    position:sticky;
    top:0;
    background-color:#fff;
}
.faqlist_area_contents{
    min-height:1000px;
}

.faqlist_area h3{
    font-size: clamp(1.0rem, 3vw, 1.0rem);
    margin-top: 1rem;
    border-bottom: 2px dotted #f29600;
    color:#f29600;
}
.faqlist_area h4{
    font-size: clamp(1.0rem, 3vw, 1.0rem);
    margin-top:1rem;
}


.faq_answer hr{
    margin:1rem 0;
}



.faq_answer h4{
    font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin:1rem 0;
    color:#f29600;
}



@media (max-width: 820px){
    .faq_detail{
        width: 98%;
        margin:0 auto;
        max-width:inherit;
        padding:1rem;
    }
    .faq_contents{
    padding:1rem;
    margin:0 auto;

}

    .faqlist_area_cover_pc{
        flex-grow: 1;
    }

  
}
 @media (max-width: 700px){
    .faq_contents{
         width:90%;
}


}   
@media (max-width: 540px){
    .faq_contents_cover{
        display: inherit;
    }
    .faq_contents {
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
}
  .faq_answer {
    width: 100%;
   
    
}
    .faqlist_area {
    padding: 1rem 0;
    position: inherit;
    top: inherit;
    background-color: #fff;
}
.faqlist_area_cover{
    width:100%;
}    
    }

/*コラム記事*/
.column{
    padding:0 3rem;
}
.column h3{
    text-align: center;
}
.column h4{
    color:#eb6363;
	font-size: clamp(1.1rem, 3vw, 1.2rem);
    margin:0;
    padding-left:1rem;
}
.column img{
    float: right;
	margin:0 0 1rem 1rem;
    max-width: 450px;
}
.column_midashi{
    width:90%;
    max-width:680px;
    margin:0 auto;
}
.column_midashi img{
    width:100%;
}
.column-list{
	width:90%;
	max-width:800px;
	margin:0 auto;
}
ul.column-list li{
	display:flex;
	justify-content:flex-start;
}
ul.column-list li > div{
	margin:0.5rem;
	padding:0.5rem;
}
ul.column-list li > div img{
	width:160px;
	height:120px;
	object-fit:cover;
	border:thin #f6eedb solid;
}
.column-list p{
	margin:0;
}
@media (max-width: 540px){
    .column{
    padding:0 1rem;
}
    .column img{
    float: inherit;
	margin:0 0 0rem 0rem;
    max-width: inherit;
        width:100%;
}
	ul.column-list li{
	display:inherit;
}
}


/*ご利用ガイド　*/
.guide_detail_cover{
    background-color: #f9f2e9;
    margin:0;
    padding: inherit;
    padding-top: 3rem;
    padding-bottom: 3rem;
    width:100%;
}
.guide_detail{
    width: 100vw;
    max-width: 1100px;
    position: relative;
    margin: 0 auto;
    padding-right: 3rem;
    padding-left: 3rem;
    padding-bottom: 40px;
    background-color: #fff;
    border-radius: 25px;
  
}


.guide_detail h2{
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: inherit;
    text-align: left;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    line-height: 1.6;
    color: #666;
    border-bottom: #f6eadb 2px solid;
    margin-top: 1rem;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 3rem;
}

.guide_detail h3 {
   background-color: #d9c699;
    width: 100%;
    padding: 1rem;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
     border-bottom: 0px;
   color: #4d4d4d;
    text-align: left;
}


.guide_detail h3 span {
    
    font-size: clamp(1.3rem, 3vw, 1.6rem);
      text-align: center;
      color: #ffffff;
}

.guideBox{
     display:flex;
    justify-content: space-between;
    flex-direction: row;
}

.guideBox .imgBox{
    position: relative;
    padding-top: 3rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 3rem;
    width: 60%;
       margin-left: auto;
    margin-right: auto;
    text-align: center; 
}
.guideBox .imgBox img{
     width: 100%;
    
}
.guideBox .txtBox {
     padding-top: 3rem;
   width:35%;
   padding-right: 0rem;
    padding-left: 1rem;
   
}
.guideBox .imgSP{
    display: none;
    
}
@media (max-width: 820px){
.guideBox .imgBox{
    position: relative;
    padding-top: 3rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 3rem;
    width: 55%;
    
}
.guideBox .imgBox img{
     width: 100%;
    
}
.guideBox .txtBox {
     padding-top: 3rem;
   width:40%;
   padding-right: 0rem;
    padding-left: 1rem;
   
}
  
}


 
@media (max-width: 540px){
    .guideBox{
    display: inherit;

}
    .guide_detail{

    padding-right: 2rem;
    padding-left: 2rem;

   }
.guideBox .imgBox{
    position: relative;
    padding-top: 3rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 2rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
}
.guideBox .imgBox img{
     width: 100%;
    
}
.guideBox .txtBox {
    padding-top: 2rem;
   width:100%;
   padding-right: 0.5rem;
    padding-left: 0.5rem;
   padding-bottom: 2rem;
}
.guideBox .imgSP{
    display: block;
    
}
.guideBox .imgPC{
    display: none;
    
}  
    }
/*利用規定　*/
.terms ul, .terms ol {
    margin: 20px;
}
.terms li {
    text-indent: -0em;
    padding-left: 0.5em;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: clamp(150%, 2vw, 180%);
}
.terms li {
    margin-left: 1.5em;
    list-style-type: decimal;
}
.terms ol ol {
    counter-reset: number;
}
.terms ol ol li {
    list-style-type: none;
    margin-left: 0em;
    position: relative;
    padding-left: 3em;
}
.terms ol ol li::before {
    counter-increment: number;
    content: '（' counter(number) '）';
    position: absolute;
    left: 0;
}
.terms ol ol ol{
  
}
.terms ol ol ol li {
    list-style: katakana;
    margin-left: 0em;
    position: relative;
    padding-left: 0em;
}
.terms ol ol ol li::before {
   display:  none;
}

.terms ol.list {
    counter-reset: number;
}
.terms ol.list li {
    list-style-type: none;
}
.terms ol.list li {
    position: relative;
    padding-left: 3em;
}
.terms ol.list li::before {
    counter-increment: number;
    content: '（' counter(number) '）';
    position: absolute;
    left: 0;
}
.terms ul li {
    list-style-type: disc!important;
padding-left: 0em!important;
}
.terms ul li::before {
    display:  none;

}



/*oto　案内ページ*/
.oto_header{
    background: url(../img/chonai/bg_chonaicare_header.png)no-repeat top center;
    background-size: cover;
    position: relative;
    width:100%;
    height:auto;
    padding-bottom:30px;
}
.oto_title{
    position: relative;
    width:700px;
    margin:0px auto;
    padding-top:50px;
}
.oto_title img{
    width:100%;
}
.oto_lead{
    position: relative;
    width:700px;
    margin:0px auto;
    margin-top:500px;
}
.oto_lead img{
    width:100%;
}
.oto_contents{
    background: url(../img/chonai/bg_chonai_contents.png)no-repeat top center;
    background-size: cover;
    position: relative;
    width:100%;
    height:auto;
    padding-bottom:30px;
}
.oto_campaign_cover{
    width:100%;
    background-color:#f4f44d;
    margin-bottom:40px;
    padding:2rem 0;
}
.oto_campaign{
    position: relative;
    width:98%;
    max-width:800px;
    margin:0px auto;
}
.oto_campaign img{
    width:100%;
}
.campaign_text{
    width:90%;
    max-width:800px;
    margin:0 auto;
}
.campaign_text p{
    font-size: clamp(0.9rem, 3vw, 1rem);
    margin:0;
    text-align: right
}
.campaign_text img{
    width:100%;
}
.oto_course_annai_box{
    width:90%;
    max-width:800px;
    margin:0 auto;
    margin-top:50px;
    padding:1.5rem;
    padding-left:140px;
    background-color:#0c7af2;
    box-shadow: 4px 4px 8px #444;
    border-radius: 25px;
    position:relative;
}
.oto_course_annai_box img{
    width:100%;
}
.oto_course_annai_box button{
    background: none;
    border:none;
}
.oto_course_annai_box_illust{
    position: absolute;
    top:-30px;
    left:0;
}
.oto_course_annai_box_illust img{
    width:150px;
}
.oto_check_cover{
    background-color: rgba(102,175,160,0.8);
    position: relative;
    width:100%;
}
.oto_check_container{
    width:98%;
    max-width:800px;
    margin:0 auto;
    position: relative;
    padding-top:150px;
}
.oto_check_midashi{
    width:100%;
    position: absolute;
    top:-50px;
}
.oto_check_midashi img{
    width:100%;
}
.oto_check_btn button{
    background: none;
    border:none;
}
.oto_check_btn img{
    width:100%;
}

.oto_midashi_red{
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    color:#eb6a50;
    text-align: center;
    font-weight: bold;
    margin:1rem 0;
    letter-spacing: 0.5rem
}

.oto_course{
    margin:2rem auto;
}
.oto_course h3{
    color:#252525;
    font-weight: bold;
    text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: clamp(0, 3vw, 0.4rem);
    padding:1rem 0 1rem 0;
    margin-top:2rem;
    line-height: 1.4;
    background:rgba(255,255,255,0.7)
}
.oto_course p.caution{
    font-size: clamp(0.9rem, 3vw, 1rem);
	text-align:center;
}
.oto_course01{
    width:98%;
    max-width:800px;
    margin:0 auto;
    text-align: center;
}
.oto_course01 img{
    width:98%;
}

.oto_course h6{
    color:#d86a07;
    font-weight: bold;
    text-align: left;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    padding:2rem 0;
    letter-spacing: 0.2rem;
}
.oto_course h6 span.number{
    color:#cc9712;
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin-right:1rem;
}
.oto_course_btnarea{
    width:98%;
    max-width:495px;
    margin:0 auto;
}
.oto_course_btnarea button{
    background-color:#f4690b;
    border:#f4690b thin solid;
    border-radius:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0.8rem auto;
    line-height:1.4;
    width:100%;
}
.oto_course_btnarea button:hover{
    background-color:#fff;
}
.oto_course_btnarea button > div{
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    margin:0.5rem;
    text-align: center;
}
.oto_course_btnarea button > div span{
    display: inline-block;
}
.oto_course_btnarea button img{
    width:45px;
}
.oto_course_btnarea button span i{
    font-size: clamp(1.5rem, 3vw, 1.7rem);
}
.oto_course_text{
    width:98%;
    max-width:750px;
    margin: 0 auto;
    padding:1rem;
}
.oto_course_text ul, .oto_course_text div{
    width:50%;
    padding:0 0.5rem;
}
.oto_course_text ul{
    padding:1.5rem 0.5rem;
}
.oto_course_text ul li{
    padding:1rem 0;
    border-bottom: dashed 2px #bc9368;
}
.oto_course_text div img{
    width:100%;
    padding:0.5rem;
}

.oto_course_text li{
    display: flex;
    justify-content: space-between;
}
.oto_course_text p{
    margin:0 1rem;
}
.order_btn_base button{
    margin:0.5rem;
    border-radius:10px;
}
.oto_order_btn_footer button img{
    width:70%;
}
.oto_order_btn_footer button{
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: bold;
    padding:1rem;
    color:#bc9368;
    background: none;
    border:none;
    border-bottom: 5px solid #e4bf91;
    margin:1rem;
}
.oto_order_btn_footer button:hover{
    color:#f29600;
    background:#fff;
    border-bottom: 5px solid #f29600;
}
.thanks_dog{
    width:90%;
    max-width:650px;
    margin:0 auto;
}
.thanks_dog img{
    width:100%;
}
.thanks_dog{
    width:90%;
    max-width:510px;
    margin:0 auto;
}
.thanks_dog img{
    width:100%;
}
.thanks_text{
    width:90%;
    max-width:680px;
	margin:2rem auto;
}

@media (max-width: 820px){
    .oto_header{
    background: url(../img/chonai/bg_chonaicare_header_tub.png)no-repeat top center;
}
}
@media (max-width: 540px){
    .oto_header{
    background: url(../img/chonai/bg_chonaicare_header_sp.png)no-repeat top center;
}
    .oto_title{
    width:90%;
}
    .oto_lead{
    position: relative;
    width:100%;
}
    .oto_course_text ul, .oto_course_text div{
    width:100%;
    padding:0 0.5rem;
}
    .dog_illust{
    width:80px;
}
    .oto_course_annai_box{
    
    margin-top:15px;
    padding:1rem;
    padding-left:1rem;
    }
.oto_course_annai_box_illust{
    display: none;
}
    .oto_check_container{
    padding-top:220px;
}
}

/*oto　オーダーフォーム関係*/
.petlist_cover{
    width:100%;
}
.pet_list{
    display: flex;
    justify-content: space-between;
    padding:1rem 0;
    border-bottom:#f6eadb 2px dotted;
}
.pet_list > div{
    margin:0.5rem;
}
.pet_list select{
    padding:0.5rem;
    height:40px;
    width:100%;
    font-size:clamp(0.8rem, 3vw, 0.9rem);
}
.order_onoff{
    width:25%;
    max-width:250px;
}
.order_onoff span{
    font-size: clamp(0.9rem, 3vw, 0.9rem);
}
.oto_order_btn span{
    display: inline-block;
}
.foodinfo_off{
    display: none;
}
@media (max-width: 540px){
    
    .pet_list{
    display: inherit;
    }
    .order_onoff{
    width:100%;
    max-width:inherit
    }
}


/*フード量の計算*/
.keisan_food{
    padding:1rem;
    background-color: #fcf5f5;
    max-width:350px;
}
.keisan_food h5{
    font-size: 0.9rem;
}
.keisan_food label{
    display: block;
}
.keisan_food input, .keisan_food select{
    border:thin #999 solid;
    border-radius: 5px;
    padding:0 0.2rem;
    background-color:#fff;
}
.keisan_food input[type="number"] {
    height:inherit;
    text-align: inherit;
}
.keisan_food select{
    height:1.8rem;
    width:100%;
    max-width:450px;
}

.keisan_food input[type="number"]::-webkit-inner-spin-button,
.keisan_food input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  appearance:auto;
    margin: 0;
}

p.keisan_caution{
    font-size: 0.8rem;
    margin:0 0 1rem 0;
}
.keisan_food .result{
    display: block;
    margin:1rem 0 0 0;
}
.keisan_food .result input{
    background-color:#fad2d2;
    font-size: 1rem;
    font-weight: bold;
}

/*to B 向けビジネスページ*/
.business{
    max-width:inherit;
    padding:20px;
    border-radius: 10px;
}
.business .mypage h2{
    margin:1.5rem;
}
.business h3{
    margin-bottom:0.5rem;
}
.select-area{
    padding:0.2rem 0.5rem 0 1.5rem;
}
.select-box{
    padding:0.2rem 0.5rem;
}
.output-area{
    
}

.monthly-total{
    border:1px solid #eee;
    background:#eee;
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: bold;
    padding:1rem;
    width: 95%;
    margin: 0 auto;
}
.month_kirikae{
    display: flex;
    justify-content:flex-start;
    width:95%;
    margin:0 auto;
}
.month_kirikae span{
    margin:0 0.5rem;
}

.business table{
    width:95%;
    margin:0 auto;
    font-size: 0.9rem;
}

.business table thead th{
    background-color: #fff4d6;
    border-bottom:1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1;
}
.business table th:first-child{
    position: sticky;
    left: 0;
}
.business table thead th:first-child{
    z-index: 2;
}

.txt-right{
        text-align: right;
    }
    .b-info{
        margin:1rem 0;
    }
    .monthly-total-table{
        margin:0 auto;
    }
    .monthly-total-table table{
        background: #ccc;
        border-spacing: 2px;
    }
    .monthly-total-table table th{
        background-color:#ddd;
    }
    .flex-area > div.total1{
        flex: 5;
        margin-right:1rem;
    }
    .flex-area > div.total2{
        flex: 3;
        margin-right:1rem;
    }
    .flex-area > div.total3{
        flex: 1
    }

/*business-menu*/
.business-btn a{
    display: block;
    font-size: 1.2rem;
    text-align: center;
    color:#333;
    height:100%;
    padding:1rem;
}
.business-btn{
    display: block;
    border:1px solid #ddd;
    filter:drop-shadow(1 1 3 0.5);
    background-color:#fff;
    width:50%;
    max-width:500px;
    margin:0.2rem auto;
    text-align: center;
    color:#333;
}
.business-btn span{
    font-size: 0.8rem;
    color:#333;
    display: block;
}
.business-btn:hover{
    background-color:#fff4d6;
}

/*company_info*/
.company_info{
    display: flex;
    justify-content: space-between;
    margin-bottom:2rem;
}
.company_info div{
    flex:1;
}
.company_info div h4{
    font-size:1.1rem;
    margin-bottom:0.5rem;
    margin-left:1rem;
    margin-top:1rem;
}
.company_info table th{
    background-color: #fff4d6;
    width:40%;
}
.business .btn_white{
    width:40%;
    margin:2rem auto;
}

/*備考欄に追加機能　プレゼント用のピューレを選ぶプルダウン*/
.bikouran_select {
    width: 100%;
    max-width: 360px;
}

/*muni-mypage*/
.muni-bg{background-color:#e3edf2;}
.muni-border{border:#568BAE thin solid;}

.muni-menu{display: inherit;box-sizing: border-box;}
.muni-menu p{text-align: center;}
.muni-menu p span{display: inline-block;}
.muni-menu a{color:#333;}
.muni-menu a:hover{color:#568BAE}
.muni-menu a span{display: inline-block;}

.muni-menu div{
    box-sizing: border-box;
    padding:clamp(5px,2.5vw,20px);
}
.muni-menu .muni-btn a{
    display: block;
    border: #568BAE thin solid;
    border-radius: 10px;
    padding: clamp(0.5rem, 2.5vw, 1rem);
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}
.muni-menu .muni-btn a:hover{
    background-color:#e3edf2;
    cursor: pointer
}


.muni-menu-pet{
    border:none;
}
.muni-menu-pet ul{
    display: flex;
    justify-content: center;
    max-width:650px;
    margin:0 auto;
    flex-wrap: wrap;
}
.muni-menu-pet ul li{
    display: flex;
    margin:0 1rem;
}
.muni-menu-pet ul li label{
    margin-left:1rem;
}

.pan-muni{
    padding:5px 15px;
    font-size:14px;
    z-index:100;
    background-color:#fff;
}

/*muni-mypage-order-form*/
.muni-pkg-img{
    width:98%;
    margin:0 auto;
    max-width:400px;
}

.muni-pkg-img > img{
    width:100%;
}

.muni-form input{
    width:100%;
    display: inline-block;
    border:#666 thin solid;
}
.muni-menu div.cycle-set-free, .muni-menu div.cycle-set-teiban{
    padding:0 0 0 1rem;
}
.muni-menu div.cycle-set-teiban{
    padding:1rem 0 0 1rem;
}

.muni-keisan_food{
    padding:1rem;
    background-color:aliceblue;
    width:98%;
    margin:0 auto;
}
.muni-keisan_food h5{
    font-size: 0.9rem;
}
div.muni-form-keisan{
    padding: clamp(5px, 2.5vw, 10px);
}
.muni-keisan_food input, .muni-keisan_food select{
    border:thin #999 solid;
    border-radius: 5px;
    padding:0 0.2rem;
    background-color:#fff;
}
.muni-keisan_food select{
    height:1.8rem;
    padding:0 0.2rem;
    width:100%;
    max-width:250px;
}
.muni-keisan_food .result{
    display: block;
    margin:1rem 0 0 0;
}
.muni-keisan_food .result input{
    background-color:#cce7ff;
    font-size: 1rem;
    font-weight: bold;
}

.muni-form button{
    background-color:#80c4ff;
    border-radius: 10px;
    border:thin solid #80c4ff;
    padding:0.5rem;
    text-align: center;
    width:100%;
    color:#fff;
    margin:0.5rem 0;
}
.muni-form button:hover{
    background-color:#fff;
    border:thin solid #80c4ff;
    color:#80c4ff;
}

.muni_kekka_list{
    font-size:0.9rem;
    width:200px;
    text-align: right;
    float:right;
}
.muni_kekka_list span{
    display:block;
}

.muni_result_img img{
    width:100%;
}
.pkg-img{
    max-width:400px;
    margin:0 auto;
}
.pkg-img img{
    width:100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

div.muni-food-repeat-list{
    padding:0em 0 0 1em;
}
.muni-food-repeat-list ul{
    padding:0em;
    line-height: 1.4;
    width:100%;
}
.muni-food-repeat-list ul li{
    display: flex;
    justify-content: flex-start;
    padding:0.5em;
}
.muni-food-repeat-list li input{
    width:auto;
}

/*muni過去のデータ　モーダル*/
.muni_modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.muni_modal.show {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  opacity: 1;
}

.muni_modal img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
}
.muni_thumbnail {
  width: 180px;       /* サムネイルの幅 */
  cursor: pointer;    /* クリックできることを示す */
  margin: 5px;        /* 周囲の余白 */
  transition: 0.3s;   /* ホバー時のアニメーション */
}

.muni_modal-close, .muni_modal-prev, .muni_modal-next {
  position: absolute;
  cursor: pointer;
  color: #fff;
  user-select: none;
}

.muni_modal-close { top: 20px; right: 30px; font-size: 40px; }
.muni_modal-prev { left: 10px; top: 50%; transform: translateY(-50%); font-size: 50px; }
.muni_modal-next { right: 10px; top: 50%; transform: translateY(-50%); font-size: 50px; }

#modal-caption {
  color: #fff;
  margin-top: 10px;
  text-align: center;
}

.muni_pastdata ul{
    width:auto;
    display: flex;
    flex-wrap: wrap;
}
.muni_pastdata ul li{
    flex: 0 0 calc(33.333% - 10px);
    margin:5px;
    display: flex;
    flex-direction: column;
    padding:1em;
    border:thin #ddd solid;
}

.clear{
    clear: both;
}



@media (max-width: 540px){
    .muni-menu p{
        text-align:left;
    }
}

/*muni_camapaign用*/
.fixed-cta {
  position: fixed;
  bottom: 240px;
  right: 0px;
  z-index: 999;
  width: 280px;
  height: 80px; /* 2行なら少し高さUP */
  background: #f29600;
  color: #fff;
  border: 2px solid #fff;
    border-right:none;
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    
  opacity: 0; /* 初期は透明 */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fixed-cta .line1 {
  font-size: 14px;
}

.fixed-cta .line2 {
  font-size: 18px;
  margin-top: 2px;
}
a.fixed-cta:hover{
  background: #fff;
  color: ;
    border: 2px solid #f29600;
    border-right:none;
}
.campaign_contents{
    width:100%;
    max-width:1000px;
    margin:0.5em auto;
    background-color: #ebf0f3;
    border-radius: 10px;
    padding: 2em;
    text-align: center;
}
.campaign_contents img{
    width:100%;
    max-width:800px;
    text-align: center;
    display: block;
    margin:0 auto;
}
a.btn_campaign img{
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    margin:1em auto;
}
a.btn_campaign img:hover{
    transform: translateY(4px);
    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.5));
}

#campaign .second_contents{
    
}
@media (min-width: 1025px) {
  .fixed-cta {
    display: flex; /* flexに戻す */
  }
    .footer-cta{
        display: none;
    }
    
}

/* スマホサイズは最初非表示 → JSで表示 */
@media (max-width: 1024px) {
  .fixed-cta {
    display: none;
  }
    /* 横長ボタン */
  .footer-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    background: #fff; /* 背景は白でもOK */
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  }

  .footer-cta .coupon-btn {
    width: 90%;
    max-width: 400px;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    border-radius: 8px;
  }
    .campaign_contents{
        padding:0.5em
    }
}
    

/* スクロールしたら表示される */
.js-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.js-cta.is-show {
  opacity: 1;
  pointer-events: all;
}


.campaign_contents img{
    width:100%;
}
    
/*購入煽りボタン*/
.coupon-cta {
  text-align: center;
  margin: 40px 0;
}

.coupon-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
}

a.coupon-btn {
  display: inline-block;
  width: 320px;
  max-width: 90%;
  height: 64px;
  line-height: 64px;
  background: #f29600;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

a.coupon-btn:hover {
  background: #ffac33;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px);
　color: #fff;
}
a.coupon-btn:visited{
    color:#fff;
}