@charset "utf-8";
/* CSS Document */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	overflow-x: hidden;
}
html, body {
	font-size:100%;
	height: 100%;
}

img { width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
ul, ol { list-style: none;}
a { text-decoration: none; color: inherit;}

body {   
	background: #fff;
	color: #382622;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 1.8em;
	position: relative;
}
a { color: #382622; text-decoration: none;}
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)";}
a[href^="tel:"] { pointer-events: none;}

section { width: 100%;}

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt70 { margin-top:70px !important; }
.mt80 { margin-top:80px !important; }
.mt90 { margin-top:90px !important; }
.mt100 { margin-top:100px !important; }

/* animation */
@keyframes bounce {
  0%, 100% { translate: 0;}
  50% { translate: 0 -10px;}
}

/* FV
----------------------*/
header .cvBox { margin: 50px auto 0; position: relative;}
header .cvBox_btn { position: absolute; right: 0; bottom: 10%; width: 100%;}

#footerFollowButtonBlock { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 999; display: none;}

/* button
----------------------*/
.cv_btn_area { margin: 60px auto; position: relative;}
.cv_btn_area .cv_balloon { width: 20%; position: absolute; top: -30px; left: 10%; z-index: 10; animation: bounce 2s infinite ease-in-out;}

/* sec_f -- confidence
----------------------*/
.sec_confidence div { position: relative;}
.sec_confidence .txt { position: absolute; left: 5%; font-size: 20px; line-height: 2em;}
.sec_confidence .txt,
.sec_confidence .txt span { font-family: "Noto Sans JP", sans-serif; font-weight: normal; font-size: 4vw; line-height: 1.87em;}

.sec_confidence .txt sup { font-size: 0.5em;}
.sec_confidence .txt .small { font-size: 0.8em;}
.sec_confidence .txt .pink { color: #cd5470;}

.confidence03 .txt03 { width: 55%;}
.confidence01 .txt01,
.confidence02 .txt01,
.confidence03 .txt01,
.confidence03 .txt02,
.confidence04 .txt01,
.confidence04 .txt02 { width: 90%;}

.confidence01 .txt01 { top: 6%;}
.confidence02 .txt01 { top: 46%;} 
.confidence03 .txt01 { top: 14.5%;} 
.confidence03 .txt02 { top: 68.7%;} 
.confidence03 .txt03 { top: 77%;} 
.confidence04 .txt01 { top: 16.5%;}
.confidence04 .txt02 { top: 84%;}

/* sec_h -- contact
----------------------*/
.sec_h { position: relative;}
.sec_h .h_tel_btn { position: absolute; top: 61%; left:0; width: 100%;}
.sec_h .h_btn { position: absolute; top: 75%; left:0; width: 100%;}

/* sec_i -- item
----------------------*/
#itemDetail { width: 92%; margin: 50px auto;}
.itmCnt h4, .itmCnt h5, .itmCnt p,
.itmCnt th, .itmCnt td, .itmCnt li, 
.itmCnt span { font-family: "Noto Sans JP", sans-serif; font-weight: normal; font-size: 4vw; line-height: 1.6em;}

.itmCnt h4 { background: #af8a65; height: 2em; line-height: 2em; font-size: 4.2vw; color: #fff; text-align: center;}
.itmCnt .itmDtl { border-left: 4px solid #f2eee9; border-right: 4px solid #f2eee9; padding: 25px 30px;}
.itmCnt .itmDtl:last-of-type { border-bottom: 4px solid #f2eee9;}
.itmCnt .itmDtl ul.lst_dot li { list-style: disc; margin-left: 1em;}
.itmCnt .itmDtl ul.lst_note li { padding-left: 1em; text-indent: -1em;}

.itmCnt table.itemTbl { width: 100%; border-top: 1px solid #eaeaea;}
.itmCnt table.itemTbl th, .itmCnt table.itemTbl td { border-bottom: 1px solid #eaeaea; padding: 10px; vertical-align: middle;}
.itmCnt table.itemTbl th { width: 48%; color: #af8a65; text-align: left; line-height: 1.2em;}
.itmCnt table.itemTbl td.name { font-size: 4.2vw;}
.itmCnt .itm_01 .itemTbl th { width: 30%;}

.itmCnt .itm_01 .pic { width: 80%; margin: 0 auto 30px;}
.itmCnt .itm_01 .itemTbl { width: 100%;}

.itmCnt .itm_04 .pic { width: 80%; margin: 0 auto 20px;}
.itmCnt .itm_04 .kibble { text-align: center; margin-bottom: 15px; font-size: 4.2vw;}

.itmCnt .itm_05 .block_supplyTbl:last-of-type { margin-top: 30px;}
.itmCnt .itm_05 h5 { font-size: 4.2vw; text-align: center; margin-bottom: 15px; line-height: 1.5em;}
.itmCnt .itm_05 .wline { line-height: 1.6em;}

.itmCnt table.supplyTbl { width: 100%; border-collapse: collapse; border:1px solid #eaeaea; text-align: center; table-layout: fixed;}
.itmCnt table.supplyTbl th, .itmCnt table.supplyTbl td { padding: 3px 0; border:1px solid #eaeaea; vertical-align: middle;}
.itmCnt table.supplyTbl th { background: #fafafa; color: #af8a65; line-height: 1.4em; padding: 10px 0;}

/* sec_j -- other
----------------------*/
.sec_j .sec_mrc { margin-top: 50px;}

.sec_j .mgnDtl,
.sec_j .mrcDtl { background: #faf6f3; padding: 40px 30px;}
.sec_j .tgl dt { cursor: pointer;}
.sec_j .tgl dd { display: none; text-align: center; margin-top: 30px;}

/* sec_k -- special
----------------------*/
.sec_k { margin-top: 30px;}

/* sec_l -- outro
----------------------*/
.sec_l { margin: 50px 0;}
.sec_l .l_arrow { margin-top: 60px; text-align: center;}