@charset "UTF-8";

/* ----------------------------------------------- Reset */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: break-word;
  -moz-tab-size: 4;
  tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
}

/* ----------------------------------------------- 基本スタイル */

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', "游ゴシック", YuGothic,'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
 font-weight: 500;
 font-size:15px;
 background-color: #000;
 color:#eee;
}

img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	border: none;
}

a{color:#ffa500;}
a:hover {
	top:1px;
	left:1px;
	position:relative;
}

hr {
 overflow: visible;
 height: 0;
height: 1px;
border-top: 1px solid #666;
border-bottom: none;
margin: 15px 0;
}
small,.small {
  font-size: 80%;
}
b,strong {
  font-weight: bold;
}
.center{text-align: center;}
.left{text-align:left;}
.right{text-align:right;}
i{
 margin-right: 5px;
}

/* ----------------------------------------------- header */
/* -------------------------------- パンくずリスト */
.breadcrumb {
 margin: 10px 15px;
 padding: 0;
 list-style: none;
 font-size:12px;
}
.breadcrumb li {
 display: inline;/*横に並ぶように*/
 list-style: none;
}

.breadcrumb li:after {/* >を表示*/
 content: '>';
 padding: 0 0.2em;
 color: #ccc;
 font-size:13px;
}
.breadcrumb li:last-child:after {
 content: '';
}
/* -------------------------------- */
h1{
 text-align: center;
}
.head_text{
 margin: 25px 0 30px;
 line-height: 1.7;
 font-size:17px;
}
.head_text p:first-child{
 color:#ffec47;
}

/* ----------------------------------------------- main */
#main{
 line-height: 1.6;
 padding: 0 5px;
}
.index .target{
 color:#aacf53;
 font-weight: bold;
}

.itemlist li{
 list-style: none;
 border: solid 1px #ddd;
 border-radius: 5px;
 padding: 7px;
 margin-bottom: 10px;
}
.itemlist h2{
 text-align: center;
 margin-bottom: 5px;
}
.itemlist_img{
 text-align: center;
}
.itemlist_text{
 padding-left: 5px;
 color: #ddd;
}
.itemlist_link{
 padding: 10px 0 5px;
 text-align: center;
}
.itemlist_link a{
 display: inline-block;
 border: 1px solid #ffa500;
 border-radius: 20px;
 padding: 2px 10px;
 text-decoration: none;
 background-color: #333;
}

/* ----------------------------------------------- 製品ページ */
.food h1{
 text-align: center;
 padding-bottom: 30px;
}
.wrap{
 padding-top: 20px;
}
/*　wrap左　*/
.item_img{
 text-align: center;
 padding-bottom: 10px;
}
.item_img2{
 padding: 10px 0;
 text-align: center;
}
.item_img2 p{
max-width: 162px;
margin-left: auto;
margin-right: auto;
color: #ccc;
}
.item_text p{
 max-width: 16em;
 margin: 0 auto;
}
.item_text p span{
 margin-left: 4em;
}

.food h2{
 border-radius: 5px;
 padding: 5px;
 text-align: center;
 color: #fff;
 margin: 7px 0;
 line-height: 1.2;
}

/*　wrap右　*/


.wrap_r .point{
 font-weight: bold;
 font-size:18px;
 padding: 0 15px 15px ;
 line-height: 1.4;
 text-decoration: underline;
}

.wrap_r .point img{
 margin-bottom: 7px;
}
.feature{
 margin:0 0 1.5em 20px;
 }
 .feature li{
  margin-bottom: 5px;
 }
.food .feed{
 margin-bottom: 1em;
}
.food h3{
 display: inline-block;
 color:fff;
 border-radius: 5px;
 padding:2px 10px;
 margin-bottom: 7px;
}
.food h4{
 font-size:16px;
 border-style: solid;
 border-width: 2px;
 border-radius: 7px;
 padding: 2px 12px;
 margin-bottom:5px;
 font-weight: normal;
 background-color: #222;
}
.food h4 i{
 margin-right:7px;
}
.accordion .inner {
 padding: 10px 1em 0.5em 1em;
}
.food .value{
 list-style-type: none;
 margin-left: 0;
}
table{
 border-collapse: collapse;
 border:1px solid #ccc;
 table-layout: fixed;
 width: 100%;
 margin-bottom: 1em;
}

th,td{
 padding:5px 7px;
 border:1px solid #ccc;
}
.feeding th{
 background-color: #444;
 color:#fff;
}
.feeding td{
 text-align: center;
}
.inner ul{
 margin-left: 20px;
 margin-bottom: 1em;
}

/* ----------------------------------------------- アコーディオン */
.accordion .ac_title{cursor: pointer;}
.accordion .inner {display: none;}

/* ----------------------------------------------- 色設定 */
#s_treats h2,#s_treats h3{
 background-color:#1f8f39;
}
#s_treats .wrap_r .point{
 color: #1f8f39;
}
#s_treats h4{
 border-color: #1f8f39;
}
#vital h2,#vital h3{
 background-color:#bc1b21;
}
#vital .wrap_r .point{
 color: #bc1b21;
}
#vital h4{
 border-color: #bc1b21;
}
#p_timothy h2,#p_timothy h3{
 background-color:#1f8f39;
}
#p_timothy .wrap_r .point{
 color: #1f8f39;
}
#p_timothy h4{
 border-color: #1f8f39;
}

/* ----------------------------------------------- 脱酸素剤関連 */
.o2_link a{
 display: block;
 width: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #fff;
 color: #000;
 font-weight: bold;
 font-size:16px;
 border-radius: 7px;
}
#o2{
 padding: 5px 10px;
 border-radius: 7px;
 display: inline-block;
 text-align: left;
 background-color: #5f5f5f;
 line-height: 1.5;
}
#o2 h5{
 font-size:15px;
 margin-bottom: 7px;
}
#o2 h5 span{
 font-size:80%;
}
#o2 p{
 margin-left: 15px;
 font-size:13px;
}

/* ----------------------------------------------- Footer */
.backlink,.reclink{
 text-align: center;
 padding-bottom: 20px;
}
.backlink img{
 width: 80px;
}
#footer {
 text-align: center;
 font-size: 13px;
 border-top: solid 1px #999;
 padding: 15px;
}
#footer ul {
 list-style-type: none;
}
#footer ul li{
 margin: 0;
}

/* ----------------------------------------------- モバイルのみ */

@media screen and (max-width: 480px) {
.head_text{
 margin-left: 7px;
 margin-right: 7px;
}
}

/* ----------------------------------------------- PCのみ */

@media screen and (min-width: 481px) {
#header,#main,#footer,h1,.head_text,.header_box{
 margin-left: auto;
 margin-right: auto;
}
.index h1,.head_text,.header_box{
 max-width: 700px;
}
#main{
 max-width: 1100px;
}
#footer{
 max-width: 90%;
 min-width: 1100px;
}
.flex,.index .head_text,.index .itemlist,.index .item{
 display: flex;
}
.head_text{
 align-items: center;
}
.head_text p:first-child{
 flex-basis: auto;
}
.head_text p:last-child{
flex-shrink:0;
flex-basis: 220px;
}
.itemlist{
 justify-content: space-between;
 flex-wrap: wrap;
}
.itemlist li{
 width: calc(33% - 5px);
}
.itemlist_img{
flex-shrink:0;
flex-basis: 140px;
}
.itemlist_text{
 flex-basis: auto;
}
.itemlist_text p:first-child{
  min-height: calc( 1.5em * 5 );
  line-height: 1.5;
}

.food .wrap{
 display: flex;
 margin-bottom: 20px;
}
  .food .wrap_l{
   flex:4;
   padding: 0 20px;
  }
  .food .wrap_r{
   flex:6;
   padding: 0 20px;
  }

}