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

.spanfont {
font-size: 16px;
vertical-align: middle;
}

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

header {
	padding-top:10px;
    padding-bottom: 30;
    padding-left: 30;
    padding-right: 30;
}


.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.style-nav ul {
	list-style-type: none;
}

.style-nav ul li a {
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 8px;
}

.hero {
	background-image: url(../../images/hero.jpg);
	background-size: cover;
	padding: 20px 20px 20px 20px;
	color: #FFFFFF;
	text-align: center;
}

.totuyu {
    background-image: url(../../products/tuyu/images/p-tuyu.jpg);
    background-size: cover;
    padding: 20px 20px 50px 20px;
    color: #FFFFFF;
    text-align: center;
}

.totuyu2 {
    background-image: url("../../products/tuyu/images/yuragi.gif");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.topon2 {
    background-image: url("../../products/pon/images/yasai.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.totare2 {
    background-image: url("../../products/tare/images/haikei.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.todore2 {
    background-image: url("../../products/dore/images/sarada.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.tonabe2 {
    background-image: url("../../products/nabe/images/nabe.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.togoma2 {
    background-image: url("../../products/goma/images/onigiri.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.toretort2-1 {
    background-image: url("../../products/retort/images/haikei.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.toretort2-2 {
    background-image: url("../../products/retort/images/haikei-pasta.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.toretort2-3 {
    background-image: url("../../products/retort/images/haikei-souzai.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.shouyu2 {
    background-image: url("../../products/goma/images/bshouyu.jpg");
    background-size: cover;
    padding: 20px 20px 50px 20px;
    background-position: center;
    color: #FFFFFF;
    text-align: center;
}

.haikeia {
	background-image: url("../../images/haikeia.jpg");
	background-size: 500px auto;
	padding: 20px 20px 50px 20px;
	background-position: left center;
	text-align: center;
}


.honsha {
	background-image: url("../company/images/honsha.jpg")
	background-size: cover;
	padding: 20px 20px 50px 20px;
	color: #FFFFFF;
	text-align: center;
}

h1 {
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 38px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 20px;
}

h2{
    font-size: 20px;
    font-weight: bold;
}

h3 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 20px;
}


.text-darkorange {
    color: #ff8c00;
}

.button {
	border: 2px #FFFFFF solid;
	padding: 8px 30px;
	border-radius: 30px;
	color: #FFFFFF;
	text-decoration: none;
}


.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}



    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .2rem;
        padding-left: .2rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

/*青色の輪郭線 (outline)を消す */


*:focus {
    outline: none;
    width: auto;
    height: auto;
}

.navbar-dark .navbar-nav .nav-link:hover
{
  color: #ffa500;
}
.hei100{
    width: 90px;
}

.footerback{
    background-image: url(../../23new/images/footerback.jpg);
    background-size: auto;
}

.jouhou{
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-top: 40px;
}

.border2{
    border-bottom: thin dotted #CCCCCC;
    border-left: thin solid #CCCCCC;
}

.border-y{
    border-bottom: thin solid #CCCCCC;
    border-top: thin solid #CCCCCC;
}

.border-orange{
    border-style: none none solid;
    border-bottom-color: #ffc107;
    padding-top: 15px;
}

.mt-n1 {
  margin-left: -1rem !important;
  margin-right: -0.5em !important;
}

/*ふわっとスクロールに合わせて1*/

.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);/*下から*/
  transition: opacity 3s, visibility 3s, transform 3s;/*ふっわと時間*/
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}



.map {
  position: relative;
  width: 100%;
  padding-top: 300px;
  overflow: hidden;
}

.map iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + 150px + 150px);
  pointer-events: none;
}

.line-orange{
    border-bottom: 1px solid #FBD78D;
}

.line-green1{
    border-bottom: 1px solid #9acd32;
}

.navhaikei{
    background-image: url(../../images/nav.gif);
}

@media (max-width: 575px) {
  .navhaikei {
    background-image: none !important;
  }
}

.json-container {
  border-radius: 50%; /* ボーダーラジウスを50%に指定することで、丸い形になる */
  background-color: #338044; /* 背景色を指定 */

}

/* 追加の色 */

.chairo{background-color:#8b4513;
}

/* ハンバーガー開いたときの背景の色*/
.siro{background-color: #FFFFFF;
}

/* ハンバーガー（toggler）3本線の色*/
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(120,200,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* ハンバーガー（toggler）枠の色*/
.navbar-light .navbar-toggler {
    border-color: rgba(120,200,0,1);
}

.ggura{
    background-image: url(../../images/gura.gif);
}



/* ナビゲーションのドロップダウンメニューの枠を取る*/

.wakukesu {
  border-style: hidden;
}


.custom-dropdown .dropdown-menu {
  border: none; /* ドロップダウンメニューの枠を取り除く */
  box-shadow: none; /* ドロップダウンメニューの影を取り除く（任意） */
}

/* safari（iPhone）のナビゲーションのドロップダウンメニューの枠を取る*/
.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

.list-group-item {
  border-radius: 0;
}

/* スマートフォン用のメディアクエリ */
@media (max-width: 767px) {
  /* 非表示にしたい<td>要素に対するセレクターを指定 */
  .table-responsive .hidden-on-smartphone {
    display: none;
  }
}

.table-70-percent {
  width: 70%;
  margin-left: 0%;
  margin-right: 30%;
}

/* テーブルの背景を透明にするためのカスタムCSS */
.transparent-table {
  background-color: transparent;
}

/* Googleマップをレスポンシブ対応 */
.iframe-g {
  width: 100%;
  aspect-ratio: 16/9; 
}

.img-fit {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.link-opacity-70 {
    color: rgba(0, 0, 0, 0.7) !important;
  }