@charset "UTF-8";

.c-button._shiny {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 18px;
    background-color: #008F00;
    box-shadow: 0 3px 0 0 #048004;
    border-radius: 4px;
    padding: 10px;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.102rem + 0.74vw, 1.75rem);
    letter-spacing: .2em;
    max-width: 400px;
    width: 80%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  transition: 300ms;
}

.c-button._shiny img{
    height: 30px;
    margin-right: 5px;
    width: auto;
}

.c-button._shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 300ms;
    /*animation: shinyshiny 2.5s ease-in-out infinite;*/
}

.c-button._shiny:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
    background-color: #07bd07;


}

.c-button._shiny-f {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 18px;
    background-color: #00a0ea;
    box-shadow: 0 3px 0 0 #008dc9;
    border-radius: 4px;
    padding: 10px;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.102rem + 0.74vw, 1.75rem);
    letter-spacing: .2em;
    max-width: 400px;
    width: 80%;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
  transition: 300ms;
}

.c-button._shiny-f img{
    height: 30px;
    margin-right: 5px;
    width: auto;
}

.c-button._shiny-f::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 300ms;
    /*animation: shinyshiny 2.5s ease-in-out infinite;*/
}

.c-button._shiny-f:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
    background-color: #1ebbff;


}


@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*▲タブ切替************************/ 
.tab-1,.tab-2,.tab-3,.tab-4 {
    display: flex;
    flex-wrap: wrap;
    max-width: 768px;
	margin-bottom: 4.0rem;
	line-height: 1.6;
	text-align: center;
    margin: 0 auto;
}

.tab-1 h3, .tab-2 h3, .tab-3 h3, .tab-4 h3 {
	font-size:1.6rem;
}
.tab-1 h4, .tab-2 h4, .tab-3 h4, .tab-4 h4 {
	font-size:1.2rem;
	margin:0.5rem 0;
}

.tab-1 p, .tab-2 p, .tab-3 p, .tab-4 p {
	font-size:0.9rem;
	text-align: left;
}

@media screen and (min-width: 640px) {
	.tab-1,.tab-2, .tab-3, .tab-4 {
	font-size:16px;
}
	
}

.center{
	text-align: center;
}
.tab-1 > label, .tab-2 > label, .tab-3 > label, .tab-4 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: 0.5rem;
    border-bottom: 5px solid #E36385;
    border-radius: 0;
    background-color: #DFD4B7;
    color: #7A4D2A;
    font-size: 1.2rem;
	line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

.tab-1 > label:first-of-type, .tab-2 > label:first-of-type, .tab-3 > label:first-of-type, .tab-4 > label:first-of-type{
    border-radius: 20px 0 0 0;
}
.tab-1 > label:last-of-type, .tab-2 > label:last-of-type, .tab-3 > label:last-of-type, .tab-4 > label:last-of-type {
    border-radius: 0 20px 0 0;
}


.tab-1 input, .tab-2 input, .tab-3 input, .tab-4 input {
    display: none;
}

.tab-1 > div, .tab-2 > div, .tab-3 > div, .tab-4 > div {
    display: none;
    width: 100%;
    background-color: #fff;
	border-radius: 0 0 20px 20px;
	padding-top: 1.0rem;
}

.tab-1 label:has(:checked),.tab-2 label:has(:checked),.tab-3 label:has(:checked),.tab-4 label:has(:checked)  {
    background-color: #E36385;
    color: #fff;
}

.tab-1 label:has(:checked) + div, .tab-2 label:has(:checked) + div, .tab-3 label:has(:checked) + div, .tab-4 label:has(:checked) + div {
    display: block;
}

.material-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1.0rem;
    padding: 1.0rem;
}

.material-list li{
	width:48%;
}

.material-list li:nth-child(n+3) {
	margin-top:1.0rem;
}
.attention{
	background:#7A4D2A;
	color:#fff;
	text-align: center;
	padding: 1.5rem 1.0rem;
	border-radius: 0 0 20px 20px;
}

.attention h3{
	color:#FFFB84;
	display: flex;
	justify-content: center;
}

.attention h3 > img{
	margin-right: 0.5rem;
}

.attention h4{
	color:#7A4D2A;
	background:#FFFCAA;
	border-radius:10px;
	padding:0.5rem;
	margin-top: 1.0rem;
}

@media screen and (min-width: 640px) {
	.tab-1 > label {
    font-size: 1.5rem;
}
	.material-list li{
	width:18%;
}
	.material-list li:nth-child(n+3) {
	margin-top:0;
}
	.material-list li:nth-child(n+6) {
	margin-top:1.0rem;
}
}

      .m-ttl_text span {
  display: inline-block;
  color: #fff;
  background-color: #e36385;
  padding: 0 8px;
}
      .m-ttl_text {
  font-size: 50px;
  font-size: clamp(30px,3.676vw,50px);
  font-weight: 700;
  margin: 30px 0;
  position: relative;
  z-index: 10;
          text-align: center;
}
       .attention img {
      display: block;
  max-width: 100%;
  width: auto;
  height: auto;
      object-fit: none;}
      .food_wrp {max-width: 768px; margin: 0 auto;}
      .food_wrp_in {display: flex;max-width: 500px; margin: 0 auto;}
      .food_box {margin: 15px auto; padding: 2%; width: 47%;background: #fff; border-radius: 10px; }
      .food_txt { text-align: center;font-size: 13px;}
      .br_sp { display: none}
.br_pc { display: block}

@media (max-width: 768px) {
.br_sp { display: block}
.br_pc { display: none}
}
      .food_ttl {color: #333;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;}

.f-b_pk {
  font-weight: 700;
  color: #e36385;
}
/*にわとり・うずら・あひるおやつセット
乾燥ミルワーム*********************/
/*▼ミルワームとは*/

.fl-3{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.fl-3 li{
	width:32%;
}

.about_list{
	font-size:1.0rem;
	color:#7A4D2A;
	margin-bottom: 2.0rem;
}

.about_list.fl-3 li{
	text-align: center;
}

.about_list.fl-3 li p{
	margin:1.0rem 0;
}
.about_list.fl-3 li strong{
	color:#E36385;
}


@media screen and (min-width: 640px) {
	.about_list{
	font-size:1.8rem;
}
}
/*▲ミルワームとは*/
 /*生ミルワームとの比較*/	           
    .hikaku_list{
	margin:1.0rem;
}

.hikaku_list h3{
	background:#7A4D2A;
	color:#fff;
	font-size:1.5rem;
	text-align: center;
	border-radius: 10px 10px 0 0;
	padding:0.5rem 0;
}

.hikaku_list table{
	width:100%;
	border-collapse: separate;
	border-spacing: 5px;
}

.hikaku_list td,
.hikaku_list th{
	width:33%;
	text-align: center;
	color:#7A4D2A;
	font-size: 1.0rem;
}

td.hikaku-ok{
	background:#E36385;
	color:#fff;
	font-size:2.0rem !important;
}
td.hikaku-ng{
	background:#F3ECDA;
	font-size:2.0rem !important;
}

.hikaku_list th.hikaku-ttl{
	text-align: left;
}




@media screen and (min-width: 640px) {
	.merit_list{
	max-width: 768px;
    margin: 0 auto;
}
	.demerit_list{
	margin-top: 2.0rem;
}
	.fl-2-1 img,
	.fl-2-1 p{
	width:49%;
}
	.hikaku_list{
	margin:2.0rem;
}
	.merit_list h3,.hikaku_list h3{
		font-size:2.0rem;
	}
	.merit_list_text li,
	.demerit_list p,
	.hikaku_list td,
	.hikaku_list th{
	font-size:1.2rem;
}
/*注意！*/
    .attention{
	background:#7A4D2A;
	color:#fff;
	text-align: center;
	padding: 1.5rem 1.0rem;
	border-radius: 0 0 20px 20px;
}

.attention h3{
	color:#FFFB84;
	display: flex;
	justify-content: center;
	font-size:1.6rem;
}

.attention h3 > img{
	margin-right: 0.5rem;
}

.attention h4{
	color:#7A4D2A;
	background:#FFFCAA;
	border-radius:10px;
	padding:0.5rem;
	margin-top: 1.0rem;
	font-size:1.2rem;
}

.attention p {
	font-size:0.9rem;
	text-align: left;
}

    
    .about_list img{width: 30%;
        display: block;
  max-width: 100%;
  width: auto;
  height: auto;}
    .food_meal {max-width: 768px; margin: 0 auto;}