/*
  作成日: 20190102
  作成者: FOIS01
*/
/* 調整用ベーススタイル
   ========================================================================== */
	 
.howtoeat_nav { display: flex; flex-wrap: wrap; width: 100%; }
.howtoeat_nav li { margin-bottom: 10px; }
.howtoeat_nav li:nth-child(4n +1) { margin-left: 0; }
.howtoeat_nav li a { align-items: center; background: #3f2c26; color: #fff; display: flex; padding: 5px 22px 5px 14%; position: relative;transition:.3s all ease-in-out; width: 100%; }
.howtoeat_nav li a:hover {background:#fe8814;}
.howtoeat_nav li a::after { background-image: url(../../image-cmn/ico-arrow-01-down-white.png); background-repeat: no-repeat; background-size: contain; content: ""; display: inline-block; height: 6px; position: absolute; top: calc(50% - 3px); right: 15px; width: 8px; }
.howtoeat_nav li a .howtoeat_nav_jp { font-style: italic; font-weight: bold; position: absolute; left: 3px; opacity: .15;transition:.3s all ease-in-out;}
.howtoeat_nav li a .howtoeat_nav_en { display: block; font-family:" Yu Gothic"; line-height: 1.2; position:relative; z-index:1;transition:.3s all ease-in-out;}
.howtoeat_nav li a:hover .howtoeat_nav_jp {opacity:1; left: 14%;}
.howtoeat_nav li a:hover .howtoeat_nav_en {opacity:0;}
.howtoeat_box { background: #fff; margin-top: 10%; padding: 4.5%; position: relative; }
.howtoeat_in { text-align: center; }
.howtoeat_ttl img { height: auto; width: auto; }
 @media screen and (max-width:479px) {
.howtoeat_nav li { width: 100%; }
.howtoeat_ttl img { max-height: 24px; }
}
@media screen and (min-width:480px) and (max-width:767px), print {
.howtoeat_nav li { margin-left: 2%; width: 49%; }
.howtoeat_nav li:nth-child(2n +1) { margin-left: 0; }
.howtoeat_ttl img { max-height: 36px; }
}
@media screen and (max-width:767px) {
.howtoeat_nav li a { height: 50px; }
.howtoeat_nav li a .howtoeat_nav_jp { font-size: 3rem; height: 34px; line-height: 34px; top: calc(50% - 17px); }
.howtoeat_ttl { position: absolute; bottom: calc(100% - 12px); left: 0; width: 100%; text-align: center; }
}
@media screen and (min-width:768px), print {
.howtoeat_nav li { margin-left: 2%; width: calc(94%/4 - 0.1px); }
.howtoeat_nav li:nth-child(4n +1) { margin-left: 0; }
.howtoeat_nav li a { height: 60px; }
.howtoeat_nav li a .howtoeat_nav_jp { font-size: 4rem; height: 40px; line-height: 40px; top: calc(50% - 20px); }
.howtoeat_nav li a .howtoeat_nav_en { font-size: 1.6rem; }
.howtoeat_ttl { position: absolute; bottom: calc(100% - 22px); left: -5%; }
.howtoeat_ttl img { max-height: 68px; }
}